JS 将HTML页面转为PDF或者World 并下载

html导出为PDF是先使用html2canvas转为图片，再将图片通过jspdf.js转为PDF

html导出为word是利用大佬的JS库，GitHub项目地址如下：https://github.com/huangbohang/export-word/tree/main

只涉及到前端的操作

使用操作如下

1 //JS引用
2 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
3 <script src="https://unpkg.com/[email protected]/dist/jspdf.umd.min.js"></script>
4 <script src="/JS/FileSaver.min.js"></script>
5 <script src="/Js/export-word.min.js"></script>

html代码

<div class="content">
            这是测试的html
        </div>

JS代码

//转为PDF
function printToPDF() { 
    const element =document.querySelector('.content');
    html2canvas(element,{dpi:800}).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jspdf.jsPDF({
            orientation: 'portrait',
            unit: 'px',
            format: [canvas.width, canvas.height]
        });
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('download.pdf');
      $(".layui-btn").show();
       layer.closeAll();
    });
}
//转为Word
function  htmlToWord(){    
const wrap =  document.querySelector('.content');
const config = {
      addStyle:true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
      fileName:'测试文件', // 导出文件名
      toImg:['.need-to-img','.bg-danger'], // 页面哪些部分需要转化成图片，例如echart图表之类
      success(){
 
} // 完成之后回调，一般页面篇幅比较大，时间比较长
}
exportWord(wrap,config)  
}