1. 首頁 > 生活經驗 > >

最低兼容ie10 Vue網頁html轉換PDF的思路詳解

HTML轉PDF：
1.頁面底層實現——Vue：最低兼容ie10
2.實現思路：
1 使用html2canvas.js將網頁轉換為圖片
2 使用jsPdf.debug.js將canvas生成的圖片轉換為pdf文件
具體實現：
要這樣實現首先要引入兩個插件：
【最低兼容ie10 Vue網頁html轉換PDF的思路詳解】html2canvas.js
jsPdf.debug.js
注：
因為ie10在canvas截圖時候會出現部分樣式丟失的情況，所以在代碼中有部分修改了頁面的樣式
所以建議在做截圖的時候 ， 將頁面代碼復制一份到隱藏域，在隱藏域里面做修改，這樣就不會修改頁面原有樣式了
如果大家有更好的方法，歡迎提議
下面上代碼：
script type="text/ecmascript-6"import co from ’co’import html2Canvas from ’../html2canvas’import JsPDF from ’../jsPdf.debug’export default { title: ’用戶信息’, data () {return {} }, methods: { // 核心代碼printOut () {// 獲取需要打印的區域，以div為單位 ， 此處使用的是vue的選擇器let pdfDom = document.querySelector(’#pdf-wrap’)// 因為在ie10下，會出現input樣式丟失的情況 ， 所以在此處清楚input的標簽的邊框let arrnode = pdfDom.querySelectorAll(’input’)for (var i = 0; iarrnode.length; i) {arrnode[i].style.border = ’hidden’}// 設置背景色pdfDom.style.background = ’#FFFFFF’let _this = thishtml2Canvas(pdfDom, {allowTaint: true, taintTest: false,onrendered: function (canvas) {// 開始canvas截圖// 開始準備工作let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeight// 此處圖片格式可以是PNG，也可是JPEG，注意：需要考慮Browser支持的圖片格式let pageData = https://www.questions.com.cn/dnjc/canvas.toDataURL(’image/PNG’, 1)pdfDom.style.display = ’none’// 開始將圖片轉換為PDF// 設置紙張大?。?方向let PDF = new JsPDF(’’, ’pt’, ’a4’)if (leftHeightpageHeight) {PDF.addImage(pageData, ’PNG’, 0, 0, imgWidth, imgHeight)} else {while (leftHeight0) {PDF.addImage(pageData, ’PNG’, 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight0) {PDF.addPage()}}}// 保存PDFPDF.save(_this.userInfo.card_id’-’_this.userInfo.user_name’.pdf’)}})html2Canvas()} }, ready () { }}/script總結
以上所述是小編給大家介紹的Vue網頁html轉換PDF（最低兼容ie10）的思路詳解 ， 希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的 。在此也非常感謝大家對經驗啦網網站的支持！
您可能感興趣的文章:vue學習筆記之指令v-text && v-html && v-bind詳解用v-html解決Vue.js渲染中html標簽不被解析的問題Vue.js綁定HTML class數組語法錯誤的原因分析vue2.0全局組件之pdf詳解vue中將網頁打印成pdf實例代碼

相關經驗推薦