有一朋友想把網頁內容變成PDF下載下來，問我有沒有好辦法，
這還真巧了，咱公司也有這個需求，就是網頁生成合同，然后可以直接列印合同內容，最早吧，就是可以直接列印就好了，
當時為解決完美列印的問題，挺費勁的，當時第三方插件還有BUG（當然把解決放給發給作者了，作者早已經修復了），正經反復折騰了好一陣子，
就留了篇帖子《VUE實作HTML頁面區域內容的列印（print.js），出現多列印一個空白頁的問題》記錄一下當時踩的坑，也希望能幫到更有需要的人，
后來校區門店想要可以選擇，要么直接列印，要么保存PDF，以備日后存檔和列印，
這次比較順利，至少沒怎么采坑，直接就搞定了，借著這次機會，也簡單整理下，希望可以幫助有需要的人吧，
簡單步驟如下：
一、先下載JS檔案（文末附原始碼），保存到專案目錄中
二、下載兩個類別庫
cnpm install --save html2canvas cnpm install jspdf --save
三、引入下載的htmlToPdf.js檔案，在_main.js檔案中匯入
import htmlToPdf from '../libs/js/htmlToPdf.js';
Vue.use(htmlToPdf);
四、直接使用 this.getPdf() 呼叫函式即可
// nodeName：節點名稱（要列印的內容） // fileName：要生成的pdf檔案名，不包含（.pdf）擴展名 // scale：PDF文字的清晰度 // style：自定義樣式，根據需要，可以傳入樣式對要列印的物件進行一定的設定 let fileName = '合同' + EUtils.dateFormat(new Date(), 'yyyymmddhhiiss');// 生成pdf檔案名，格式：合同年月日時分秒 this.getPdf('#auditionOrder', fileName);// nodeName, fileName, scale, style 此方法一共四個引數，一般前兩個引數基本就滿足絕大部分需求了
看上去夠簡單了吧？對于這次問題的解決，相對的，前期確實比較順利，但是生成的PDF檔案的內容樣式調整確實還需要耗費精力去精雕細琢，
當然，這就沒有技術難度了，就是一個經驗和耐心的活了，不在這里描述了，
附htmlToPdf.js原始碼
/** * 通用html轉PDF檔案 * * 需要先下載兩個插件，才可以正常使用 * cnpm install --save html2canvas * cnpm install jspdf --save * * 在需要使用的地方，直接呼叫this.getPdf(nodeName, fileName, scale, style)； * nodeName，頁面中需要轉成PDF檔案的內容部分定義id屬性，id屬性值 * fileName，要生成的pdf檔案名，不包含（pdf）擴展名 * scale，PDF文字的清晰度 * style，自定義樣式，根據需要，可以傳入樣式對要列印的物件進行一定的設定 * 例如：this.getPdf('#nodeId' 'PDF檔案名'); */ /* eslint-disable */ import html2Canvas from 'html2canvas'; import JsPDF from 'jspdf'; export default { install(Vue, options) { Vue.prototype.getPdf = function(nodeName, fileName, scale, style) { // 匯出之前先將滾動條置頂，不然會出現資料不全的現象 window.pageYOffset = 0; document.documentElement.scrollTop = 0 document.body.scrollTop = 0 // loading提示資訊 this.$Message.config({top:500}); var downloadPdfMsg = this.$Message.loading({ content : 'PDF檔案生成中...', duration : 0, }); // 要轉化的資料 var html2Pdf = nodeName ? document.querySelector(nodeName) : document.body;// 要轉換的資料（沒有傳入指定節點，則默認轉換整個頁面） if (style) { // 如果傳入自定義樣式 html2Pdf.style.cssText = style; } // 引數配置 var opts = { allowTaint: true,//允許加載跨域的圖片 taintTest: true, //檢測每張圖片都已經加載完成 scale: scale || 3, // 添加的scale 引數 logging: false, //日志開關，發布的時候記得改成false useCORS: false }; html2Canvas(html2Pdf, opts).then((canvas) => { var contentWidth = canvas.width; var contentHeight = canvas.height; var pageHeight = contentWidth / 592.28 * 841.89;//一頁pdf顯示html頁面生成的canvas高度 var leftHeight = contentHeight; var position = 0; var imgWidth = 595.28;// A4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高 var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = https://www.cnblogs.com/leafinwind/archive/2023/04/14/new Image(); //設定圖片跨域訪問 pageData.setAttribute('crossOrigin', 'Anonymous'); setTimeout(() => { pageData = canvas.toDataURL('image/jpeg', 1.0); var PDF = new JsPDF('', 'pt', 'a4'); if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; if (leftHeight > 0) { PDF.addPage(); } } } setTimeout(downloadPdfMsg, 500);// 關閉loading提示 PDF.save((fileName ? fileName : new Date().getTime()) + '.pdf');// 如果沒有傳入要生成的檔案名，則默認使用當前時間戳作為檔案名 }, 1000); }) } } }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550163.html
標籤：其他