After reviewing online, let me tell you the idea. It is to convert the page into image format. Then, through the base64 code of the image, generate PDF... I read their articles and sorted them out as follows.
It's easy to say, so how do you implement it specifically?
1. We want to add two modules
The first one. Convert the page html to an image
npm install --save html2canvas
The second one. Generate the image to pdf
npm install jspdf --save
2. Define global functions.. Create a file in the specified location. My personal habit is to put it ('src/components/utils/htmlToPdf')
// Export page in PDF formatimport html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
= function () {
var title =
html2Canvas(('#pdfDom'), {
allowTaint: true
}).then(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) {
()
}
}
}
(title + '.pdf')
}
)
}
}
}
3. Use the function file we defined in.
import htmlToPdf from '@/components/utils/htmlToPdf' (htmlToPdf)
4. Just call our getPdf method on the required export page.
Html
<div class="row" style="padding-top: 55px;background-color:#fff;"> //Give yourself the ui part you need to export. Define the id as "pdfDom". This part will be the part displayed by pdf</div> <button type="button" class="btn btn-primary"v-on:click="getPdf()">ExportPDF</button>
js
export default {
data () {
return {
htmlTitle: 'Page export PDF file name'
}
}
}
Summarize
The above is the implementation idea of the Vue export page in PDF format introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!