There are two common ways to save Vue front-end HTML as PDF.
Use html2Canvas and JsPDF library, convert to image and save PDF. Call the browser window.print() and manually save it as a PDF.
The first kind of
advantages
No preview click to save without manual configuration save select part of Dom save
disadvantages
Less clear needs to be converted to images first without previewing in advance is not suitable for saving long page content rely on html2Canvas and JsPDF library
The second,
advantages
You can preview it in advance and it’s great for saving long paginated content and it’s great for saving it directly from the browser API, so it’s clean and easy to develop quickly.
disadvantages
The first time you need to manually configure parameters in the preview box, you need to manually click save, there will be a pop-up window of Print preview, part of Dome can not be selected, only the current whole page can be saved.
The first one: use html2Canvas and JsPDF libraries, convert them into pictures and save PDF.
Save the function file location: SRC /utils/ htmltopdf.js
/** path: SRC /utils/ htmltopdf.js name: Export the page to PDF format **/
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
const htmlToPdf = {
getPdf(title) {
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true.
}).then(canvas=>{
// Width of the content
let contentWidth = canvas.width;
// Content height
let contentHeight = canvas.height;
// A PDF page displays the canvas height generated by the HTML page, the size of a4 paper [595.28,841.89];
letPageHeight = contentWidth / 592.28 * 841.89;
// Height of HTML page not generated PDF
let leftHeight = contentHeight;
// Page offset
let position = 0;
// The size of the A4 paper [595.28,841.89], the width and height of the image in the PDF generated by the CANVAS of the HTML page
letImgWidth = 595.28;
letImgHeight = 592.28 / contentWidth * contentHeight;
// Canvas to image data
let pageData = canvas.toDataURL('image/jpeg', 1.0);
// Create a new JsPDF object
let PDF = new JsPDF(' '.'pt'.'a4');
// Check whether paging is available
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;
The position - = 841.89;
if (leftHeight > 0) {
PDF.addPage()
}
}
Copy the code }
//保存文件
PDF.save(title + '.pdf')
})
}
Copy the code};
export default htmlToPdf;
Copy the code
Use the function SRC /views/PdfPage1
<template>
<div id="PdfPage1">
<button type="button" class="btn btn-primary" @click="pdfBtn"> export PDF < / button >
<div id="pdfDom" style="padding:10px; background-color:#fff;">
<img alt="Vue logo" src="@/assets/logo.png">
<h1>Welcome to Your Vue.js App</h1>
<p v-for="(item,index) in 5" :key="index">{{item}}Welcome to Your Vue.js App</p>
</div>
</div>
</template>
<script>
import htmlToPdf from '@/utils/htmlToPdf'
export default {
name: "PdfPage".
data() {
return{
htmlTitle:'Page export PDF file name'.
}
},
methods:{
pdfBtn() {
htmlToPdf.getPdf(this.htmlTitle);
}
}
}
</script>
<style scoped>
</style>
Copy the codeCopy code the second way: call the browser window.print() and manually save it as a PDF.
SRC /views/ pdfPage2.vue
<template>
<div id="PdfPage2">
<div class="no-print">
<button type="button" class="btn btn-primary" @click="pdfBtn"> export PDF < / button >
</div>
<div id="pdfDom" style="padding:10px; background-color:#fff;">
<img alt="Vue logo" src="@/assets/logo.png">
<h1>Welcome to Your Vue.js App</h1>
<p v-for="(item,index) in 5" :key="index">{{item}}Welcome to Your Vue.js App</p>
</div>
</div>
</template>
<script>
export default {
name: "PdfPage2".
methods:{
pdfBtn() {
window.print();
}
}
}
</script>
<style scoped>
/* Save the style */
/ *
Learn more about Baidu CSSprintstyle
* /
@media print{
.no-print{
display: none;
}
}
/* Print page configuration */
@page{
margin:60px 10px;
}
</style>
Copy the codeCopy the code