网页设计的网站网络广告推广服务

一、使用场景和原理

需要将当前页面(一般详情页面)或者dom容器中的内容保存/截图，并且导出为word或者pdf
导出word:获取dom结构直接转化为word导出
导出pdf:用canvas生成当前页面或者dom范围的快照，参考截图功能，然后将生成的canvas转为pdf内容并导出

二、需要用到的插件

npm i mhtml-to-word --save  //html结构转为word插件
npm i html2canvas --save  //获取dom，用canvas画下来，转为base64格式
npm i jspdf --save	//将canvas内容转为pdf内容

三、使用

import { exportWord } from 'mhtml-to-word'
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

导出为word：

exportToWord=(e)=>{e.preventDefault();exportWord({filename: "日报详情",selector: ".dailyDetail",    //容器idstyle:''})
}

导出为pdf:

exportToPdf=(e)=>{e.preventDefault();let dom = document.getElementById('dailyDetail');let w = dom.offsetWidthlet h = dom.offsetHeighthtml2canvas(dom).then((canvas) => {//第一个参数为第一页pdf方向，p为纵向i为横向;第二个为单位，一般取mm,px;//第三个为第一页的格式let pdf = new jsPDF('p', 'px', 'a4');   //参数1：图片资源，可以是图片文件的路径或者base64编码字符串//参数2：类型//参数3，4：图片在PDF中的x、y轴坐标//参数5，6：图片在PDF中的宽度、高度//参数7（可选）：指定图片资源的别名//参数8（可选）：指定图片的压缩质量，取值为0-1之间的浮点数//参数9（可选）：指定图片的旋转角度，取值范围为0-360之间的整数pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, w, h);pdf.save('日报详情.pdf');});
}