|
@@ -6,6 +6,19 @@
|
|
<el-radio v-model="transChartType" :label="2">本地转</el-radio>
|
|
<el-radio v-model="transChartType" :label="2">本地转</el-radio>
|
|
</div> -->
|
|
</div> -->
|
|
<el-button type="primary" plain style="width:182px;height:40px;" @click="$router.push({path:'/pptenlist'})">{{$t('Slides.return_to_list')}}</el-button>
|
|
<el-button type="primary" plain style="width:182px;height:40px;" @click="$router.push({path:'/pptenlist'})">{{$t('Slides.return_to_list')}}</el-button>
|
|
|
|
+ <!-- 下载配置 -->
|
|
|
|
+ <div class="setting">
|
|
|
|
+ <div>
|
|
|
|
+ <span>是否压缩</span>
|
|
|
|
+ <el-radio v-model="setCompression" :label="true">是</el-radio>
|
|
|
|
+ <el-radio v-model="setCompression" :label="false">否</el-radio>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <span>图表转换优化</span>
|
|
|
|
+ <el-radio v-model="setCompression2" :label="true">开</el-radio>
|
|
|
|
+ <el-radio v-model="setCompression2" :label="false">关</el-radio>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<el-button type="primary" style="width:182px;height:40px;margin-left: 0;" @click="downloadPPT" :disabled="isPublish">{{$t('Slides.operations_download')}}</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" @click="transHandle" @command="handleCommand" :disabled="isPublish">
|
|
<el-dropdown split-button style="width:182px;height:40px;" type="primary" @click="transHandle" @command="handleCommand" :disabled="isPublish">
|
|
{{layoutStr}}
|
|
{{layoutStr}}
|
|
@@ -51,7 +64,7 @@
|
|
import Cover from './components/CoverEn.vue';
|
|
import Cover from './components/CoverEn.vue';
|
|
import CustomCover from './components/CustomCover.vue';
|
|
import CustomCover from './components/CustomCover.vue';
|
|
import TransReport from './components/catalog/transReport.vue';
|
|
import TransReport from './components/catalog/transReport.vue';
|
|
-import {countComponentName,pptConfigInit,toTextProps,toJson,svg2Base64,getImgRealSize,calcScale,getShapeOptions,createRandomCode,getTableData,getChartInfo} from './utils/untils';
|
|
|
|
|
|
+import {countComponentName,pptConfigInit,toTextProps,toJson,svg2Base64,svgData2Base64,getImgRealSize,calcScale,getShapeOptions,createRandomCode,getTableData,getChartInfo} from './utils/untils';
|
|
import {marginTop,modelConfig,pptSlideMaster,pptSlideMasterEn,pptCoverEn} from './utils/config';
|
|
import {marginTop,modelConfig,pptSlideMaster,pptSlideMasterEn,pptCoverEn} from './utils/config';
|
|
import pptmixin from '../mixins/pptMixins';
|
|
import pptmixin from '../mixins/pptMixins';
|
|
import mixins from '../mixins/mixins';
|
|
import mixins from '../mixins/mixins';
|
|
@@ -105,6 +118,9 @@ export default {
|
|
transReportShow:false,//转双周报的弹窗是否显示
|
|
transReportShow:false,//转双周报的弹窗是否显示
|
|
transChartType:2,//生成PPT时,转换动态图表的方式:1.将svg传至服务端转换;2.调用changeUrl转换
|
|
transChartType:2,//生成PPT时,转换动态图表的方式:1.将svg传至服务端转换;2.调用changeUrl转换
|
|
currentLang:'en',//语言标识
|
|
currentLang:'en',//语言标识
|
|
|
|
+
|
|
|
|
+ setCompression:false,
|
|
|
|
+ setCompression2:false,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
watch:{
|
|
watch:{
|
|
@@ -244,8 +260,21 @@ export default {
|
|
const SlideMaster = _.cloneDeep(pptSlideMasterEn)
|
|
const SlideMaster = _.cloneDeep(pptSlideMasterEn)
|
|
SlideMaster.objects[1] = {image: {x:0,y:0,w:10,h:7,path:this.pptBgImage}}
|
|
SlideMaster.objects[1] = {image: {x:0,y:0,w:10,h:7,path:this.pptBgImage}}
|
|
let pptx = pptConfigInit(new pptxgen(),this.LayoutType,'en',SlideMaster,this.pptBgImage)
|
|
let pptx = pptConfigInit(new pptxgen(),this.LayoutType,'en',SlideMaster,this.pptBgImage)
|
|
- //添加一页空白页,后续转换需要
|
|
|
|
- pptx.addSlide()
|
|
|
|
|
|
+ //添加封面
|
|
|
|
+ let cover = pptx.addSlide()
|
|
|
|
+ let coverId = this.loadingAll?'cover':'changecover'
|
|
|
|
+ //let coverImg = await this.htmlToCanvans(coverId)
|
|
|
|
+ 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;
|
|
const length = this.pageList.length;
|
|
for (let i = 0; i < length; i++) {
|
|
for (let i = 0; i < length; i++) {
|
|
let slide = pptx.addSlide({ masterName: pptSlideMaster.title });
|
|
let slide = pptx.addSlide({ masterName: pptSlideMaster.title });
|
|
@@ -273,8 +302,9 @@ export default {
|
|
imgData = Data.ResourceUrl
|
|
imgData = Data.ResourceUrl
|
|
}else if(this.transChartType===2){
|
|
}else if(this.transChartType===2){
|
|
//将svgDom转为base64 png,返回一个base64字符串
|
|
//将svgDom转为base64 png,返回一个base64字符串
|
|
- imgData = await this.changeUrl(`chart_${i}_${elements[j].position}`)
|
|
|
|
|
|
+ //imgData = await this.changeUrl(`chart_${i}_${elements[j].position}`)
|
|
//imgData = svg2Base64($(`#chart_${i}_${elements[j].position} svg`)[0])//生成的svg背景色是黑色不是透明
|
|
//imgData = svg2Base64($(`#chart_${i}_${elements[j].position} svg`)[0])//生成的svg背景色是黑色不是透明
|
|
|
|
+ imgData = this.setCompression2?svgData2Base64(this.chartSVGDataMap[elements[j].chartId]):await this.changeUrl(`chart_${i}_${elements[j].position}`)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if (elements[j].type === 'text'){
|
|
} else if (elements[j].type === 'text'){
|
|
@@ -400,54 +430,6 @@ export default {
|
|
size: { type: "contain" },
|
|
size: { type: "contain" },
|
|
})
|
|
})
|
|
}
|
|
}
|
|
- //为了把封面放到第一页,操作pptx.slides达不成想要的效果,于是弄了个pptx2
|
|
|
|
- //将封面放在最后生成是因为htmlToCanvans占用太多内存会导致页面假死
|
|
|
|
- let pptx2 = pptConfigInit(new pptxgen(),this.LayoutType,'en',SlideMaster,this.pptBgImage)
|
|
|
|
- //添加封面
|
|
|
|
- let cover = pptx2.addSlide()
|
|
|
|
- let coverId = this.loadingAll?'cover':'changecover'
|
|
|
|
- //let coverImg = await this.htmlToCanvans(coverId)
|
|
|
|
- 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'}`,
|
|
|
|
- options:{fontSize:16*0.75,breakLine:true}},
|
|
|
|
- {text:`\n — ${this.coverInfo.page.ReportType} —`,options:{fontSize:16*0.75,breakLine:true}},
|
|
|
|
- {text:`\n${this.pptCoverDepartName||'Research Department'}`,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();
|
|
this.loadingInstance.close();
|
|
//结束计时
|
|
//结束计时
|
|
const end = Date.now()
|
|
const end = Date.now()
|
|
@@ -455,7 +437,7 @@ export default {
|
|
//pptx2.writeFile({ fileName: "test.pptx" });//本地测试用
|
|
//pptx2.writeFile({ fileName: "test.pptx" });//本地测试用
|
|
//直接下载
|
|
//直接下载
|
|
if(type==='dowload'){
|
|
if(type==='dowload'){
|
|
- pptx2.writeFile({ fileName: `${this.coverInfo.page.Title||'unname'}.pptx` });
|
|
|
|
|
|
+ pptx2.writeFile({ fileName: `${this.coverInfo.page.Title||'unname'}.pptx`,compression:this.setCompression});
|
|
return
|
|
return
|
|
}
|
|
}
|
|
this.publishLoading = this.$loading({
|
|
this.publishLoading = this.$loading({
|
|
@@ -486,15 +468,17 @@ export default {
|
|
partSize: 1024 * 1024 * 10, // 10MB
|
|
partSize: 1024 * 1024 * 10, // 10MB
|
|
}
|
|
}
|
|
};
|
|
};
|
|
-
|
|
|
|
- pptx2.write('blob').then((data)=>{
|
|
|
|
|
|
+ //outputType为blob时不会启用压缩,为STREAM时会按nodebuffer压缩
|
|
|
|
+ pptx2.write({compression:this.setCompression,outputType:'STREAM'}).then((data)=>{
|
|
|
|
+ //将nodebuffer转为blob
|
|
|
|
+ const blob = new Blob([data])
|
|
// 1走后端接口上传
|
|
// 1走后端接口上传
|
|
const uploadType=this.$setting.dynamicOutLinks.PptUpdateApi ||
|
|
const uploadType=this.$setting.dynamicOutLinks.PptUpdateApi ||
|
|
this.$store.state.dynamicOutLinks.PptUpdateApi ||
|
|
this.$store.state.dynamicOutLinks.PptUpdateApi ||
|
|
JSON.parse(localStorage.getItem('dynamicOutLinks')).PptUpdateApi
|
|
JSON.parse(localStorage.getItem('dynamicOutLinks')).PptUpdateApi
|
|
if(uploadType==1){
|
|
if(uploadType==1){
|
|
let form = new FormData()
|
|
let form = new FormData()
|
|
- form.append("file",data)
|
|
|
|
|
|
+ form.append("file",blob)
|
|
form.append("PptId",this.$route.query.id)
|
|
form.append("PptId",this.$route.query.id)
|
|
pptInterface.uploadPPTXFile(form).then(res=>{
|
|
pptInterface.uploadPPTXFile(form).then(res=>{
|
|
if(res.Ret===200){
|
|
if(res.Ret===200){
|