vue中將網(wǎng)頁打印成pdf實例代碼
更新時間:2017年06月15日 16:33:29 作者:激烈的海膽
本篇文章主要介紹了vue中將網(wǎng)頁打印成pdf實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
整理文檔,搜刮出一個vue中將網(wǎng)頁打印成pdf的代碼,稍微整理精簡一下做下分享。
<template> <div class="pdf-wrap" id="pdfWrap"> <button v-on:click="getPdf">點擊下載PDF</button> <div class="pdf-dom" id="pdfDom"></div> </div> </template> <style lang="scss" scoped> </style> <script type="text/ecmascript-6"> import html2Canvas from '@/components/html2canvas.js' import JsPDF from '@/components/jsPdf.debug.js' export default { methods: { getPdf: function () { let _this = this let pdfDom = document.querySelector('#pdfDom') html2Canvas(pdfDom, { onrendered: function(canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let 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() } } } PDF.save(_this.pdfData.title + '.pdf') } }) html2Canvas() }, } } </script>
需要引入
html2canvas.js'
和
jsPdf.debug.js
這兩個插件庫可輕松百度到。如果eslint驗證報錯,可在eslintignore中設(shè)置不對這兩個文件進行驗證。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn)
本文主要介紹了uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-11-11VUE3+mqtt封裝解決多頁面使用需重復連接等問題(附實例)
最近了解到mqtt這樣一個協(xié)議,可以在web上達到即時通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁面使用需重復連接等問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04Vue 實現(xiàn)對quill-editor組件中的工具欄添加title
這篇文章主要介紹了Vue 實現(xiàn)對quill-editor組件中的工具欄添加title,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08