Эх сурвалжийг харах

增加压缩设置,优化生成PPT的函数

cxmo 1 жил өмнө
parent
commit
7e9198f57e

+ 36 - 57
src/views/ppt_manage/newVersion/pptPublish.vue

@@ -8,6 +8,13 @@
         </div> -->
         <el-button  type="primary" plain style="width:182px;height:40px;" @click="$router.push({path:'/pptlist'})">{{$t('Slides.return_to_list')}}</el-button>
         <el-button  type="primary" style="width:182px;height:40px;margin-left: 0;" @click="downloadPPT" :disabled="isPublish">{{$t('Slides.operations_download')}}</el-button>
+        <el-dropdown split-button style="width:182px;height:40px;" type="primary" @command="(command)=>{setCompression = command}" @click="downloadPPT">
+            {{setCompression?'下载(压缩版)':'下载'}}
+            <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="false">不压缩</el-dropdown-item>
+                <el-dropdown-item :command="true">压缩</el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
         <el-dropdown split-button style="width:182px;height:40px;" type="primary" @click="transHandle" @command="handleCommand" :disabled="isPublish">
           {{layoutStr}}
           <el-dropdown-menu slot="dropdown">
@@ -118,6 +125,8 @@ export default {
       ReportId:0,//ppt对应的双周报id,如果没转过,则为0
       transReportShow:false,//转双周报的弹窗是否显示
       transChartType:2,//生成PPT时,转换动态图表的方式:1.将svg传至服务端转换;2.调用changeUrl转换
+
+      setCompression:false,
     };
   },
   watch:{
@@ -268,9 +277,21 @@ export default {
       const start = Date.now()
       const SlideMaster = _.cloneDeep(pptSlideMaster) 
       SlideMaster.objects[1] = {image: {x:0,y:0,w:10,h:7,path:this.pptBgImage}}
-      let pptx = pptConfigInit(new pptxgen(),this.LayoutType,'ch',SlideMaster,this.pptBgImage)
-      //添加一页空白页,后续转换需要
-      pptx.addSlide()
+      let pptx = pptInit(new pptxgen(),this.LayoutType,'ch',SlideMaster,this.pptBgImage)
+      //添加封面
+      /* let cover = pptx.addSlide()
+      let coverId = this.loadingAll?'cover':'changecover'
+      let coverImg = $(`#${coverId} .cover img`)[0].src
+      cover.addImage({
+        path: coverImg,
+        x: 0,
+        y: 0,
+        w:'100%',
+        h: '100%',
+        size: { type: "contain" },
+      })
+      //自定义封面页的内容
+      cover = this.setPPTCover(cover,this.pptCoverContent,this.coverInfo.page.Title) */
       const length = this.pageList.length;
       for (let i = 0; i < length; i++) {
         let slide = pptx.addSlide({ masterName: pptSlideMaster.title });
@@ -416,7 +437,7 @@ export default {
         }
       }
       //添加封底 如果有
-      if(this.pptBackImage.length){
+      /* if(this.pptBackImage.length){
         let back = pptx.addSlide()
         let backId = this.loadingAll?'back':'changeback'
         let backImg = $(`#${backId} img`)[0].src
@@ -428,62 +449,16 @@ export default {
             h: '100%',
             size: { type: "contain" },
         })
-      }
-      
-      //为了把封面放到第一页,操作pptx.slides达不成想要的效果,于是弄了个pptx2
-      //将封面放在最后生成是因为htmlToCanvans占用太多内存会导致页面假死
-      let pptx2 = pptConfigInit(new pptxgen(),this.LayoutType,'ch',SlideMaster,this.pptBgImage)
-      //添加封面
-      let cover = pptx2.addSlide()
-      let coverId = this.loadingAll?'cover':'changecover'
-      let coverImg = $(`#${coverId} .cover img`)[0].src
-      cover.addImage({
-        path: coverImg,
-        x: 0,
-        y: 0,
-        w:'100%',
-        h: '100%',
-        size: { type: "contain" },
-      })
-      //生成的ppt需要可以在封面页更改标题和类型,所以封面信息手动写入
-      /* const coverInfo = [
-        {text:'—————————————————————————————————\n',options:{fontSize:16*0.75,breakLine:true}},
-        {text:this.coverInfo.page.Title,options:{fontSize:28*0.75,breakLine:true}},
-        {text:`\n— ${this.pptCoverCompenyName||'ETA'} ● ${this.coverInfo.page.ReportType} —`,
-         options:{fontSize:16*0.75,breakLine:false}},
-        {text:`\n${this.pptCoverDepartName||'投研部'}`,options:{fontSize:16*0.75,breakLine:true}},
-        {text:this.coverInfo.page.PptDate,options:{fontSize:16*0.75,breakLine:true}},
-        {text:'\n—————————————————————————',options:{fontSize:16*0.75,breakLine:true}}
-      ]
-      cover.addText(coverInfo,{
-        x:'38%',
-        y:'50%',
-        w:'60%',
-        h:'28%',
-        color:(this.pptCoverTextColor||'#ffffff').slice(1),
-        align:'center',
-        fontFace:'SimHei'
-      }) */
-      //自定义封面页的内容
-      cover = this.setPPTCover(cover,this.pptCoverContent,this.coverInfo.page.Title)
-      //遍历pptx.slides,重新给每一项的部分属性赋值,再推入pptx2.slides中
-      //第一页不需要,因为是空白的
-      for(let i=1;i<pptx.slides.length;i++){
-        let item  = _.cloneDeep(pptx.slides[i])
-        item._name = `Slide ${i+1}`
-        item._slideNum = i+1
-        item._rId = cover._rId+i
-        item._slideId  = cover._slideId+i
-        pptx2._slides.push(item)
-      }
+      } */
+     
       this.loadingInstance.close();
       //结束计时
       const end = Date.now()
       console.log("转换ppt用时:",Math.floor((end-start)/1000),' s')
-      //pptx2.writeFile({ fileName: "test.pptx" });//本地测试用
+      //pptx.writeFile({ fileName: "test.pptx" });//本地测试用
       //直接下载
       if(type==='dowload'){
-        pptx2.writeFile({ fileName: `${this.coverInfo.page.Title||'unname'}.pptx`,compression:true });
+        pptx.writeFile({ fileName: `${this.coverInfo.page.Title||'unname'}.pptx`,compression:this.setCompression });
         return
       }
       this.publishLoading = this.$loading({
@@ -514,14 +489,18 @@ export default {
 
       //console.log('pptx',pptx)
       //根据配置选择是走后端接口上传还是直接前端上传到oss
-      pptx2.write({compression:true,outputType:'blob'}).then((data)=>{
+
+      //outputType为blob时不会启用压缩,为STREAM时会按nodebuffer压缩
+      pptx.write({compression:this.setCompression,outputType:'STREAM'}).then((data)=>{
+        //将nodebuffer转为blob
+        const blob = new Blob([data])
         // 1走后端接口上传
         const uploadType=this.$setting.dynamicOutLinks.PptUpdateApi ||
                         this.$store.state.dynamicOutLinks.PptUpdateApi ||
                         JSON.parse(localStorage.getItem('dynamicOutLinks')).PptUpdateApi
         if(uploadType==1){
           let form = new FormData()
-          form.append("file",data)
+          form.append("file",blob)
           form.append("PptId",this.$route.query.id) 
           pptInterface.uploadPPTXFile(form).then(res=>{
             if(res.Ret===200){
@@ -538,7 +517,7 @@ export default {
                         this.$store.state.dynamicOutLinks.ObjectStorageClient ||
                         JSON.parse(localStorage.getItem('dynamicOutLinks')).ObjectStorageClient
         // 上传到 对象存储器
-        uploadFileDirect(clientType,data,temName,options).then(url=>{
+        uploadFileDirect(clientType,blob,temName,options).then(url=>{
           console.log('文件地址',url);
           this.publishPPT(url)
         }).catch(err=>{

+ 1 - 1
src/views/ppt_manage/newVersion/utils/untils.js

@@ -624,7 +624,7 @@ export const getTableData = (data)=>{
       let cellOptions = {
         colspan:cell.mc.cs===0?1:cell.mc.cs,
         rowspan:cell.mc.rs===0?1:cell.mc.rs,
-        color: cell.fc?cell.fc.substring(1):'333',
+        color: cell.fc?cell.fc.substring(1):'333333',
         fill: cell.bg ? cell.bg.substring(1):'',
         bold: cell.bl ? true : false,
         italic: cell.it ? true : false,