vue項目中導出PDF的兩種方式
阿新 • • 發佈：2019-05-03
and sel hid align function 異步 style console device 
參考大家導出的方式，基本上是如下兩種：
1.使用 html2Canvas + jsPDF 導出PDF， 這種方式什麽都好，就是下載的pdf太模糊了。對要求好的pdf這種方式真是不行啊！
2.調用瀏覽器自身的方法。window.print() 來打印（打印時可選下載），這種方式打印出來很清楚，但純在瀏覽器兼容問題。
谷歌瀏覽器比較好用點。
兩種導出pdf清晰度對比：
--------------左邊 html2canvas + jspdf；-----------------------------------------------右邊window.print() 瀏覽器方式------------
方式一:html2canvas+jspdf
html2Canvas + jsPDF 導出普遍存在一個問題就是不太清楚的問題。目前我沒有在網上找到合適 這種方式打印出清晰的PDF解決方案。
如果不是要求太高的這種方式還是可以用的。
這種方式實現的方法：
首先npm 下載兩插件
npm i html2canvas jspdf --save-dev
在.vue文件中定義 要到導出 DOM 元素
<template> <div class="pdf-demo"> <button @click="handleDown">jsPDF方式下載</button> <button @click="handleWindowPrint( ‘#demo‘, ‘電子合同‘ )">瀏覽器方式下載</button> <div id="demo" > #demo 中的內容導出成 PDF </div> </div> </template>
然後創建一個 htmlToPdf.js 文件 ，內容如下：
import html2canvas from ‘html2canvas‘; import JsPDF from ‘jspdf‘; /** * @param ele 要生成 pdf 的DOM元素（容器） * @param padfName PDF文件生成後的文件名字 * */ function downloadPDF(ele, pdfName){ let eleW = ele.offsetWidth;// 獲得該容器的寬 let eleH = ele.offsetHeight;// 獲得該容器的高 let eleOffsetTop = ele.offsetTop; // 獲得該容器到文檔頂部的距離 let eleOffsetLeft = ele.offsetLeft; // 獲得該容器到文檔最左的距離 var canvas = document.createElement("canvas"); var abs = 0; let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 獲得當前可視窗口的寬度（不包含滾動條） let win_out = window.innerWidth; // 獲得當前窗口的寬度（包含滾動條） if(win_out>win_in){ // abs = (win_o - win_i)/2; // 獲得滾動條長度的一半 abs = (win_out - win_in)/2; // 獲得滾動條寬度的一半 // console.log(a, ‘新abs‘); } canvas.width = eleW * 2; // 將畫布寬&&高放大兩倍 canvas.height = eleH * 2; var context = canvas.getContext("2d"); context.scale(2, 2); context.translate(-eleOffsetLeft -abs, -eleOffsetTop); // 這裏默認橫向沒有滾動條的情況，因為offset.left(),有無滾動條的時候存在差值，因此 // translate的時候，要把這個差值去掉 // html2canvas(element).then( (canvas)=>{ //報錯 // html2canvas(element[0]).then( (canvas)=>{ html2canvas( ele, { dpi: 300, // allowTaint: true, //允許 canvas 汙染， allowTaint參數要去掉，否則是無法通過toDataURL導出canvas數據的 useCORS:true //允許canvas畫布內 可以跨域請求外部鏈接圖片, 允許跨域請求。 } ).then( (canvas)=>{ var contentWidth = canvas.width; var contentHeight = canvas.height; //一頁pdf顯示html頁面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html頁面高度 var leftHeight = contentHeight; //頁面偏移 var position = 0; //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高 var imgWidth = 595.28; var imgHeight = 595.28/contentWidth * contentHeight; var pageData = canvas.toDataURL(‘image/jpeg‘, 1.0); var pdf = new JsPDF(‘‘, ‘pt‘, ‘a4‘); //有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89) //當內容未超過pdf一頁顯示的範圍，無需分頁 if (leftHeight < pageHeight) { //在pdf.addImage(pageData, ‘JPEG‘, 左，上，寬度，高度)設置在pdf中顯示； pdf.addImage(pageData, ‘JPEG‘, 0, 0, imgWidth, imgHeight); // pdf.addImage(pageData, ‘JPEG‘, 20, 40, imgWidth, imgHeight); } else { // 分頁 while(leftHeight > 0) { pdf.addImage(pageData, ‘JPEG‘, 0, position, imgWidth, imgHeight); leftHeight -= pageHeight; position -= 841.89; //避免添加空白頁 if(leftHeight > 0) { pdf.addPage(); } } } //可動態生成 pdf.save(pdfName); }) } export default { downloadPDF }View Code
在 要導出 的PDF的.vue文件中， 如下是使用
引入：
import htmlToPdf from ‘yourPath /htmlToPdf‘;
點擊 jsPDF方式下載 按鈕 執行如下函數，即可導出pdf
methods: { handleDown(){ //導出PDF htmlToPdf.downloadPDF( document.querySelector(‘#demo‘),‘我的PDF‘); }, }
方式二:window.print()方法
調用瀏覽的window.print() 方法， 這種方式實現的主要思路為： 點擊 打印（下載）按鈕，
>將要<body>標簽內的內容替換成要打印的 DOM元素， 這樣就可以避免打印 不想要打印的內容了。（如果項目中使用的UI框架，此時<head>標簽內會自動移入一些樣式，最後打印時把head內的不必要的內容也替換掉。）
>然後通過setTimeout()方法異步 調用 window.print()， 因為如果你要打印的 DOM元素 不是寫的 行內樣式 的話瀏覽器渲染DOM時，是需要時間的，如果直接同步調取 window.print() 方法會造成 內部樣式表和外部樣式表的樣式丟失。
>調取完 打印後 使用 window.location.reload() 刷新頁面,恢復body 、head 表情內的內容。
具體實現代碼如下：
點擊 瀏覽器方式下載 按鈕 執行如下函數，即可導出pdf（打印界面可以選擇 另存為PDF文件）
methods: { //瀏覽器方式打印 //ele 為 css ID選擇器 //fileName 生成的PDF文件名 handleWindowPrint(ele, fileName){ //去除頁面不必要的 head 標簽內 內容， 避免影響打印頁 ， title 為保存為 pdf 的文件時的 文件名 document.head.innerHTML = ‘<meta charset="utf-8">\n‘ + ‘ <title> ‘ + fileName + ‘</title>\n‘ + ‘ <link rel="shortcut icon" href="http://192.168.29.50:8081/favicon.ico" type="image/x-icon" />\n‘ + ‘ <meta name="format-detection" content="telephone=no">\n‘ + ‘ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n‘ + ‘ <meta name="viewport" content="width=device-width,initial-scale=1.0">\n‘ + ‘ <link rel="stylesheet" href="./static/css/contract.css"/>‘; //生成pdf的外部css樣式 //要打印的 內容 html document.body.innerHTML = document.querySelector( ele ).outerHTML; // window.print(); //轉異步 等待dom元素渲染（樣式）完畢在打印 setTimeout( ()=>{ //打印 window.print(); //刷新頁面 window.location.reload(); },20 ) }, },
大致就是這樣子了。
github Demo 地址: https://github.com/Ta0hua/vue-pdf-demo
vue項目中導出PDF的兩種方式