Author: Yan Yi @ Edamame

This time we are going to talk about how to convert Pdf file, the page will often have this kind of scenario, some contract, agreement and other page to download, and to maintain consistent and pages, so the best way is to direct the page converted to the corresponding format, at present basically Doc and Pdf is more popular in these two, Let’s take a page written by Vue as an example to see how to convert it into a Pdf file.

Module is dependent on

It mainly relies on two modules: HTML2Canvas and JSPDF:

(1) NPM install –save html2Canvas

(2) NPM install –save JSPDF

Define the HtmlToPdf plug-in

Create an htmltopdf.js file with the following contents in the specified location:

// The export page is in PDF format

import html2canvas from 'html2canvas'

import JSPDF from 'jspdf'

export default {

    install(Vue, options) {
        Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
            var element = document.getElementById('pdfContent')
            html2canvas(element, {

                logging: false

            }).then(function (canvas) {
                var pdf = new JSPDF('p'.'mm'.'a4') // A4 paper, longitudinal

                var ctx = canvas.getContext('2d')

                var a4w = 170;
                var a4h = 257 // Size A4, 210mm x 297mm, each side retains 20mm margin, display area 170x257

                var imgHeight = Math.floor(a4h * canvas.width / a4w) // Convert the pixel height of a page to A4 display scale

                var renderedHeight = 0

                while (renderedHeight < canvas.height) {
                    var page = document.createElement('canvas')

                    page.width = canvas.width

                    page.height = Math.min(imgHeight, canvas.height - renderedHeight) // It may be less than one page

                    // Use getImageData to crop the specified area and draw it into the canvas object created earlier
                    page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0.0)
                    pdf.addImage(page.toDataURL('image/jpeg'.1.0), 'JPEG'.10.10, a4w, Math.min(a4h, a4w * page.height / page.width)) // Add an image to the page with a 10mm margin
                    renderedHeight += imgHeight

                    if (renderedHeight < canvas.height) {
                        pdf.addPage()
                    } // Add a blank page if there is more content to follow
                    // delete page;
                }
                pdf.save(htmlTitle + currentTime)
            })
        }
    }
}
Copy the code

Installing a plug-in

Next we need to install the plug-in implemented above into Vue: install the plug-in in main.js

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)
Copy the code

Use ExportSavePdf for conversion

Define the DOM container to convert to, then call ExportSavePdf directly, passing in arguments:

<template> <div> <div ref="pdfContent" id="pdfContent"> <el-table :data="tableData" border style="width: <el-table-column fixed prop="date" label=" date" width="150"></el-table-column> <el-table-column fixed prop="name" </el-table-column> <el-table-column prop="province" label=" province" width="120"></el-table-column> <el-table-column prop="city" label=" city" width="120"></el-table-column> <el-table-column prop="address" label=" address" Width ="300"></el-table-column> <el-table-column prop="zip" label=" zip" width="120"></el-table-column> <el-table-column <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" </el-button type="text" size="small"> </el-button type="text" size="small"> </el-table-column> </el-table> </div> <el-button type="danger" @click="ExportSavePdf()"> </template> <script> import html2canvas from 'html2canvas' import JSPDF from 'jspdf' export default { methods: {handleClick(row) {console.log(row)},}, data() {return {htmlTitle: 'PDF name ', nowTime: '', tableData: [{date: '2016-05-03', name: 'Wang Xiaohu ', Address:' 1518 Jinshajiang Road ', Zip: 200333,}, {date: '2016-05-02', name: 'Wang Xiaohu ', Address:' 1518 Jinshajiang Road ', Zip: 200333,}, {date: '2016-05-04', name: 'Wang Xiaohu ', Address:' 1518 Jinshajiang Road, Putuo District ', zip: 200333,}, {date: Address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai, Zip: 200333, }, ], } }, } </script>Copy the code