北海建设工程信息网站,企业网站前台静态模板,网站建设开发步骤,万能导航网一、使用场景和原理
需要将当前页面(一般详情页面)或者dom容器中的内容保存/截图#xff0c;并且导出为word或者pdf 导出word:获取dom结构直接转化为word导出 导出pdf:用canvas生成当前页面或者dom范围的快照#xff0c;参考截图功能#xff0c;然后将生成的canvas转为pdf内…一、使用场景和原理
需要将当前页面(一般详情页面)或者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类型//参数34图片在PDF中的x、y轴坐标//参数56图片在PDF中的宽度、高度//参数7可选指定图片资源的别名//参数8可选指定图片的压缩质量取值为0-1之间的浮点数//参数9可选指定图片的旋转角度取值范围为0-360之间的整数pdf.addImage(canvas.toDataURL(image/png), PNG, 0, 0, w, h);pdf.save(日报详情.pdf);});
}
