Html2canvas pictures cannot be displayed

Html2canvas pictures cannot be displayed

I have a bold idea that I will write until I die. If I stop writing on that day, I may die. Ha ha.

Hello, everyone. I’m your siege lion, bitch love Ken, a passionate man forever.

Recently, I received an optimization requirement: add the function of printing and generating PDF for the graphic introduction of previous travel documents

Of course, we need to rely on html2Canvas and jspdf.min.js libraries. Html2canvas is used to generate canvas, and jspdf.min.js is used to generate PDF.

First we need to introduce HTML2Canvas, JSPDF

// The export page is in PDF format
import html2Canvas from 'html2canvas'
import './jspdf.min.js'
Copy the code

We will add a global method on top of the Vue prototype, passing in two parameters

1 Selector Selects the element

2 the title title

Determine if the selected element exists and if no error is thrown, letting the user know

export default {
    install(Vue, options) {
        Vue.prototype.$_getpdf = function(selector, title=' ') {
            if(! selector) {throw new Error("The lack of the selector")}let el = document.querySelector(selector)
            if(! el) {throw new Error('Not found' + selector + 'Corresponding DOM node')}}}}Copy the code

Then we need to generate this element to canvas:

export default {
    install(Vue, options) {
        Vue.prototype.$_getpdf = function(selector, title=' ') {
            if(! selector) {throw new Error("The lack of the selector")}let el = document.querySelector(selector)
            if(! el) {throw new Error('Not found' + selector + 'Corresponding DOM node')
            }
            html2canvas(el, {
                dpi: 120.// Image sharpness problem
            }).then(canvas= >{})}}}Copy the code

Because we need to do paging printing here, we need to calculate according to the size of A4 paper:

export default {
    install(Vue, options) {
        Vue.prototype.$_getpdf = function(selector, title=' ') {
            if(! selector) {throw new Error("The lack of the selector")}let el = document.querySelector(selector)
            if(! el) {throw new Error('Not found' + selector + 'Corresponding DOM node')
            }
            html2canvas(el, {
                dpi: 120.// Image sharpness problem
            }).then(canvas= > {
                let contentWidth = canvas.width // Width of canvas
                let contentHeight = canvas.height // Height of canvas
                let pageHeight = contentWidth / 592.28 * 841.89 // Height of each page
                let leftHeight = contentHeight // The offset position
                let position = 0
                let imgWidth = 595.28
                let imgHeight = 592.28 / contentWidth * contentHeight
                let pageData = canvas.toDataURL('image/jpeg'.1.0)
                let PDF = new jsPDF(' '.'pt'.'a4')
                PDF.text(100.100.'Set header parameters')
                let pageArr = []
                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
                    pageArr.push(position)
                    console.log('What is the number of pages printed?', position)
                    if (leftHeight > 0) {
                      PDF.addPage()
                    }
                  }
                }
                console.log('Number of pages printed', pageArr)
                pageArr.forEach((val,index) = > {

                  console.log('Array of loops', index)
                })
                PDF.save(title + '.pdf')})}}}Copy the code

So we’ve generated the code.

Pay attention to the point

In general, if we print, we may need to write another code, or a component, pass in the data we need to print, locate the component far, far away, and set the width. The style code is as follows:

.xschedule-print-wrap {
    position: fixed;
    background-color: #ffffff;
    top: -9999999px;
    width: 1487px;
}
Copy the code

Then we click the download PDF button in the lower right corner, we can see that we have downloaded the PDF, if we do not open the above useCORS, the image will be blank

After opening:

html2canvas(el, {
    dpi: 120.// Image sharpness problem
    useCORS:true.// Support cross-domain image printing
}).then(canvas= >{})Copy the code

It won’t be blank in the download