页面导出PPT

标签：... 我用 PPT 导出 value ppt getBase64Result optionsImage 页面

问题1：如在首页点击导出把首页的echarts图作为一个页面导出，然后导出PPT里面还包含其他页面的东西（其他页面的图标我都获取不到DOM如何截图插入PPT），

解决方案：把其他页面也写在首页，这样不就能获取到DOM了吗然后把其他页面fixed z-inde:-9999不就ok了吗

问题2:导出PPT的时候太慢太卡，客户会误以为死机了，加loading也要等很久才出来loading

PPT默认比例是16:9我，16除以9==1.77

我的方案是页面写死宽高1280*720布局1280除以720px ==1.77 ；

最终方案我用1280*720布局，导出的图片的w h 都写成100%，这样就能铺满PPT了，每个ppt页面都叫UI出图

然后每一页PPT看做一个DOM，我用的vue,so绑定的是ref

把每一页PPT当成一个页面，然后获取到每个月页面的DOM，然后把他弄成base64的图片，最后在插入到PPT里面导出

 <!-- PPT相关的所有东西 -->
  <div ref="ppt" class="ppt-all">
    <ppt1 ref="page1Ref"></ppt1>
    <ppt2 ref="page2Ref"></ppt2>
    <ppt3 :dataAll="dataAll.dataAll" ref="page3Ref"></ppt3>
    <ppt4 v-if="dataAll.dataAll" :dataAll="dataAll.dataAll" ref="page4Ref"></ppt4>
    <ppt5 :dataAll="dataAll.dataAll" ref="page5Ref"></ppt5>
    <ppt6 :dataAll="dataAll.dataAll" ref="page6Ref"></ppt6>
    <ppt7 ref="page7Ref"></ppt7>
　　　...
  </div>

　　下面是等所有页面都拿到自己页面的base64图片后再调用插入PPT的方法，如下第一种注释写法 loadding要很久才回出来，那时PPT也导出，第二种loading实时出来

const exportPPt = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: "导出中",
    background: "rgba(0, 0, 0, 0.7)",
  });

  // await Promise.all([getBase64Result(1, page1Ref.value.page1Ref),
  // getBase64Result(2, page2Ref.value.page2Ref),
  // getBase64Result(3, page3Ref.value.page3Ref),
  // getBase64Result(4, page4Ref.value.page4Ref),
  // getBase64Result(5, page5Ref.value.page5Ref),
  // getBase64Result(6, page6Ref.value.page6Ref),
  // getBase64Result(7, page7Ref.value.page7Ref),
  // getBase64Result(8, page8Ref.value.page8Ref),
  // getBase64Result(9, page9Ref.value.page9Ref),
  // getBase64Result(10, page10Ref.value.page10Ref),
  // getBase64Result(11, page11Ref.value.page11Ref),
  // getBase64Result(12, page12Ref.value.page12Ref),
  // getBase64Result(13, page13Ref.value.page13Ref),
  // getBase64Result(14, page14Ref.value.page14Ref),
  // getBase64Result(15, page15Ref.value.page15Ref),
  // getBase64Result(16, page16Ref.value.page16Ref),
  // getBase64Result(17, page17Ref.value.page17Ref),
  // getBase64Result(18, page18Ref.value.page18Ref),
  // getBase64Result(19, page19Ref.value.page19Ref),
  // getBase64Result(20, page20Ref.value.page20Ref),
  // getBase64Result(21, page21Ref.value.page21Ref),
  // getBase64Result(22, page22Ref.value.page22Ref),
  // getBase64Result(23, page23Ref.value.page23Ref),
  // getBase64Result(24, page24Ref.value.page24Ref),
  // getBase64Result(25, page25Ref.value.page25Ref)])

  await getBase64Result(1, page1Ref.value.page1Ref);
  await getBase64Result(2, page2Ref.value.page2Ref);
  await getBase64Result(3, page3Ref.value.page3Ref);
  await getBase64Result(4, page4Ref.value.page4Ref);
  await getBase64Result(5, page5Ref.value.page5Ref);
  await getBase64Result(6, page6Ref.value.page6Ref);
  await getBase64Result(7, page7Ref.value.page7Ref);
  await getBase64Result(8, page8Ref.value.page8Ref);
  await getBase64Result(9, page9Ref.value.page9Ref);
  await getBase64Result(10, page10Ref.value.page10Ref);
  await getBase64Result(11, page11Ref.value.page11Ref);
  await getBase64Result(12, page12Ref.value.page12Ref);
  await getBase64Result(13, page13Ref.value.page13Ref);
  await getBase64Result(14, page14Ref.value.page14Ref);
  await getBase64Result(15, page15Ref.value.page15Ref);
  await getBase64Result(16, page16Ref.value.page16Ref);
  await getBase64Result(17, page17Ref.value.page17Ref);
  await getBase64Result(18, page18Ref.value.page18Ref);
  await getBase64Result(19, page19Ref.value.page19Ref);
  await getBase64Result(20, page20Ref.value.page20Ref);
  await getBase64Result(21, page21Ref.value.page21Ref);
  await getBase64Result(22, page22Ref.value.page22Ref);
  await getBase64Result(23, page23Ref.value.page23Ref);
  await getBase64Result(24, page24Ref.value.page24Ref);
  await getBase64Result(25, page25Ref.value.page25Ref);
  lastPPT();
  loading.close();
};

这里就导出，先安装插件

npm install pptxgenjs --save // ppt插件

import html2canvas from "html2canvas"; //DOM转转图片

const generateImage = (dom: any) => {
  return new Promise((resolve) => {
    html2canvas(dom).then((canvas) => {
      const base64img = canvas.toDataURL("image/png", 1.0); //转base64图片
      resolve(base64img);
    });
  });
};

import pptxgen from "pptxgenjs";


const lastPPT = () => {
  // 1. 创建PPT
  let ppt = new pptxgen();

  // ppt.layout = 'LAYOUT_WIDE'; //13.5 x 7.5

  // 2. 创建一个PPT页面，每调用一次 ppt.addSlide() 都可以生成一张新的页面
  // 建议把每个页面的构造抽成一个个函数，然后通过函数调用生成新页面，代码不会很乱
  let slide = ppt.addSlide();

  // 图片铺满的配置
  const optionsImage = {
    x: 0,
    y: 0,
    h: "100%",
    w: "100%",
    sizing: { type: "contain" }, // 图片尺寸
  };
  slide.addImage({
    ...optionsImage,
    data: page1Image.value, // 我用的是二进制图片
  });

  //第二个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page2Image.value, // 我用的是二进制图片
  });
  //第3个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page3Image.value, // 我用的是二进制图片
  });
  //第4个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page4Image.value, // 我用的是二进制图片
  });
  //第5个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page5Image.value, // 我用的是二进制图片
  });
  //第6个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page6Image.value, // 我用的是二进制图片
  });
  //第7个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page7Image.value, // 我用的是二进制图片
  });
  //第8个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page8Image.value, // 我用的是二进制图片
  });
  //第9个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page9Image.value, // 我用的是二进制图片
  });
  //第10个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page10Image.value, // 我用的是二进制图片
  });

  // 11-20
  //第11个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page11Image.value, // 我用的是二进制图片
  });
  //第12个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page12Image.value, // 我用的是二进制图片
  });
  //第13个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page13Image.value, // 我用的是二进制图片
  });
  //第14个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page14Image.value, // 我用的是二进制图片
  });
  //第15个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page15Image.value, // 我用的是二进制图片
  });
  //第16个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page16Image.value, // 我用的是二进制图片
  });
  //第17个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page17Image.value, // 我用的是二进制图片
  });
  //第18个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page18Image.value, // 我用的是二进制图片
  });
  //第19个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page19Image.value, // 我用的是二进制图片
  });
  //第20个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page20Image.value, // 我用的是二进制图片
  });
  //第21个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page21Image.value, // 我用的是二进制图片
  });
  //第22个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page22Image.value, // 我用的是二进制图片
  });
  //第23个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page23Image.value, // 我用的是二进制图片
  });
  //第24个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page24Image.value, // 我用的是二进制图片
  });
  //第25个幻灯片
  ppt.addSlide().addImage({
    ...optionsImage,
    data: page25Image.value, // 我用的是二进制图片
  });
  // 4. 生成PPT， 括号中的fileName，就是生成的 PPT名字，可以使用 .then 或者 .catch处理对应事件。
  ppt.writeFile({ fileName: "PPT的名字.pptx" });
};

标签：...,我用,PPT,导出,value,ppt,getBase64Result,optionsImage,页面
From： https://www.cnblogs.com/myfirstboke/p/17817468.html

相关文章

赞助商

阅读排行