There are two common ways to save Vue front-end HTML as PDF.

  1. Use html2Canvas and JsPDF library, convert to image and save PDF.
  2. Call the browser window.print() and manually save it as a PDF.

The first kind of

advantages
  • No preview click to save
  • No manual configuration is required to save
  • Select part of Dom to save
disadvantages
  • Less clear
  • You need to convert it to a picture first
  • No preview
  • It is not suitable to save long paginated content
  • Rely on html2Canvas and JsPDF libraries

The second,

advantages
  • You can preview it
  • It is suitable for saving long pages
  • Saved directly by the browser API, the content is clear
  • Development is convenient and fast.
disadvantages
  • The first time you need to manually configure the parameters in the preview box
  • You need to manually click save
  • There’s a Print preview popover
  • Can not select part of Dome, can only save the current entire page.

The first one: use html2Canvas and JsPDF libraries, convert them into pictures and save PDF.

  1. Install html2canvas librarynpm install html2canvas
  2. Install JSPDF librarynpm install jspdf
  3. Write save 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];
            let pageHeight = 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
            let imgWidth = 595.28;
            let imgHeight = 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;
                    position -= 841.89;
                    if (leftHeight > 0) {
                        PDF.addPage()
                    }
                }
            }
            // Save the file
            PDF.save(title + '.pdf')})}};export default htmlToPdf;

Copy the code
  1. Use functions, file locationssrc/views/PdfPage1.vue
<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 code

Second: call the browser window.print() and manually save it as a PDF.

  1. Code location: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 */
/* CSS print style */
@media print{
    .no-print{
        display: none; }}/* Print page configuration */
@page{
    margin:60px 10px;
}
</style>

Copy the code

Demo video of this article: Click browse

More front-end content welcome to pay attention to the public number: day small day personal network