vue中將網(wǎng)頁打印成pdf實(shí)例代碼
整理文檔,搜刮出一個(gè)vue中將網(wǎng)頁打印成pdf的代碼,稍微整理精簡一下做下分享。
<template>
<div class="pdf-wrap" id="pdfWrap">
<button v-on:click="getPdf">點(diǎn)擊下載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
這兩個(gè)插件庫可輕松百度到。如果eslint驗(yàn)證報(bào)錯(cuò),可在eslintignore中設(shè)置不對這兩個(gè)文件進(jìn)行驗(yàn)證。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli3.0如何使用prerender-spa-plugin插件預(yù)渲染
這篇文章主要介紹了vue-cli3.0如何使用prerender-spa-plugin插件預(yù)渲染,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
最近公司項(xiàng)目中頻繁會使用到table表格,而且前端技術(shù)這一塊也用到了vue3來開發(fā),所以基于element plus table做了一個(gè)二次封裝的組件,這篇文章主要給大家介紹了關(guān)于利用Vue3+Element?Plus封裝公共表格組件的相關(guān)資料,需要的朋友可以參考下2023-11-11
vue Element左側(cè)無限級菜單實(shí)現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無限級菜單實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
改變vue請求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解)
下面小編就為大家分享一篇改變vue請求過來的數(shù)據(jù)中的某一項(xiàng)值的方法(詳解),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
socket io與vue-cli的結(jié)合使用的示例代碼
這篇文章主要介紹了socket io與vue-cli的結(jié)合使用的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
VueJs監(jiān)聽window.resize方法示例
本篇文章主要介紹了VueJs監(jiān)聽window.resize方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01

