页面html结构导出为word或pdf

旋律代替花束丶2023-10-27 21:50

一、使用场景和原理

需要将当前页面(一般详情页面)或者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",    //容器id
      style:''
    })
}

导出为pdf:

exportToPdf=(e)=>{
    e.preventDefault();
    let dom = document.getElementById('dailyDetail');
    let w = dom.offsetWidth
    let h = dom.offsetHeight
    html2canvas(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');
    });
}