1、下載 html2canvas和jspdf? 兩個(gè)插件

yarn add html2canvas jspdf

2、html2canvas 和 jspdf github地址

https://github.com/niklasvh/html2canvas

https://github.com/MrRio/jsPDF

html2canvas官方示例：http://html2canvas.hertzen.com/

3.pdf多頁(yè)打印

<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 'html2canvas'import JSPDF from 'jspdf'export default {name: 'home',components: {chead},data () {return {msg: 'home'}},methods: {getPdf: () => {let pdfDom = document.querySelector('#home')html2canvas(pdfDom, {onrendered: function (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 * contentHeightlet 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 -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save('123.pdf')}})html2canvas()}} }</script>

總結(jié)

以上是生活随笔為你收集整理的vue中将网页以pdf格式下载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。