Export pdf components using html2canvas and JsPDF
See examples
<template> <div class="g-down-pdf"> <div ref="pdfDom"> //Inserted content <slot name="content" ></slot> </div> <div @click="savePdf" class="get-pdf"> <slot name="button"> <div>downloadPDF</div> </slot> </div> </div> </template>
<script> import html2canvas from 'html2canvas' import JsPDF from 'jspdf' export default { components: { }, props: { }, data() { return { } }, methods: { savePdf() { const title = 'Assessment Report' // The scroll bar will cause blankness. You need to put the top when exporting = 0 = 0 = 0 // On the ios mobile phone, it will cause blank above and content behind it will be lost. iOS on the computer browser will not const u = const isAndroid = ('Android') > -1 || ('Adr') > -1 // android terminal const isIOS = !!(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios terminal html2canvas(this.$, { allowTaint: true, y: isIOS ? 200 : 0 }) html2canvas(this.$, {allowTaint: true,y: isIOS ? 200 : 0}) .then((canvas) => { const contentWidth = const contentHeight = const pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 const imgWidth = 595.28 const imgHeight = 592.28 / contentWidth * contentHeight const pageData = ('image/jpeg', 1.0) const PDF = new JsPDF('', 'pt', 'a4') // There are two heights to be distinguished, one is the actual height of the html page and the page height of the generated pdf (841.89) // When the content does not exceed the range displayed on one page of pdf, no paging is required if (leftHeight < pageHeight) { (pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { // Pagination while (leftHeight > 0) { // Set in pdf to display in (pageData, 'JPEG', left, upper, width, height) (pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { () } } } (title + '.pdf') }) } } } </script>
<style scoped lang="less"> .get-pdf{ width: 100vw; height: 160px; background: #FFFFFF; box-shadow: 0px 2px 0px 0px #F5F5F5; display: flex; align-items: center; justify-content: center; margin-top: 40px; /*position: fixed;*/ /*bottom: 0;*/ &>div{ width: 90vw; height: 100px; background: #4475D6; border-radius: 8px; text-align: center; line-height: 100px; font-size: 36px; font-weight: 500; color: #FFFFFF; } } </style>
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.