JS 將HTML頁面轉為PDF或者World 並下載

保护青蛙發表於2024-09-06
JSHTML

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/jspdf@2.5.1/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)  
}

相關文章