页面html结构导出为word或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",    //容器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');
    });
}
相关推荐
中微子2 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君2 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子3 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡4 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则4 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele5 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4535 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友5 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir5 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴5 小时前
WebSocket实时通信入门到实践
前端·javascript