Organize the document, search out a code in Vue to print the web page into a PDF, and organize it a little and streamline it to share it.
<template>
<div class="pdf-wrap" >
<button v-on:click="getPdf">Click to downloadPDF</button>
<div class="pdf-dom" ></div>
</div>
</template>
<style lang="scss" scoped>
</style>
<script type="text/ecmascript-6">
import html2Canvas from '@/components/'
import JsPDF from '@/components/'
export default {
methods: {
getPdf: function () {
let _this = this
let pdfDom = ('#pdfDom')
html2Canvas(pdfDom, {
onrendered: function(canvas) {
let contentWidth =
let contentHeight =
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 = ('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
()
}
}
}
(_this. + '.pdf')
}
})
html2Canvas()
},
}
}
</script>
Need to be introduced
'
and
These two plug-in libraries can be easily accessed on Baidu. If an eslint verification error occurs, you can set it in eslintignore to not verify these two files.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.