Convert HTML page content to a picture or PDF file

1, Convert HTML page content to pictures

use html2canvas Take a screenshot.

html2canvas can capture the whole or part of the page directly in the user's browser.

1.1 first introduce the html2canvas plug-in

  • You can use < script SRC=“ https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js "> < / script > script introduction.

  • You can also use npm or yarn to install, npm install --save html2canvas, yarn add html2canvas, and then import the plug-in from 'html2canvas' in the required module

1.2 application method

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

This function returns a Promise containing the < canvas > element. Just use then to receive the resolve content returned by Promise.

1.3. use

  • Define a button to execute the export function to simulate clicking on a link, which contains the download attribute and can download files (including pictures).
<!-- Hide the link -->
<a
  id="exportImgLink"
  class="export-img-link"
  :download="exportName + '.png'"
>
  <img id="exportImg" class="export-img" alt="Export data diagram of encyclopedia monthly report" />
</a>
<button class="export-btn" @click="exportData">export</button>
exportData() {
  html2canvas(document.querySelector('#screenshotsSection'), {
    scale: 2, //Double the magnification to make the image clearer
  }).then((canvas) => {
    const exportImgEle = document.querySelector('#exportImg');
    const exportImgLinkEle = document.querySelector('#exportImgLink');
    exportImgEle.src = canvas.toDataURL('image/png');
    exportImgLinkEle.href = canvas.toDataURL('image/png');
    exportImgLinkEle.click();  // Perform download of < a > elements
  });
},

In the above example, you need to hide the < a > element. Here, you only use the < a > element simulation. What you really click is the Export button. In addition, the download attribute of the < a > element is the name of the downloaded image. If exportname ='data overview ', the downloaded image name is data overview.

2, Convert HTML web page content to PDF file

use jsPDF To generate PDF

jsPDF is an open source library that generates PDF using Javascript language

jsPDF inserts the generated picture into PDF to generate PDF.

2.1 introduction of jsPDF plug-in

  • You can use < script SRC=“ https://cdn.bootcdn.net/ajax/libs/jspdf/2.0.0/jspdf.es.min.js "> < / script > script introduction.

  • You can also use npm or yarn to install, npm install --save jspdf, yarn add jspdf, and then import the plug-in from 'jspdf' in the required module

2.2 application method

var imgData = 'data:image/jpeg;base64.............'
var doc = new jsPDF()

doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)

First, use binary data format string to represent the image (including the image display data URI), then use new jsPDF() to initialize a pdf object, finally load the image into pdf, and set the image format, position (top, left), and size (width, height) in pdf.

2.3 use

Because the data URI of the picture is required. have access to HTMLCanvasElement.toDataURL() method. So you can use the above html2canvas, first convert it to canvas, and get the data UR of the picture through the toDataURL() method.

// Generate data, picture format quality 1.0 (best)
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// Picture size
const pdfWidth = 210;
// a4 the paper size is 210mm*297mm, and the page margins are 25mm up, down, left and right respectively
const pdf = new jspdf('p', 'mm', 'a4');
pdf.addImage(
  pageData,
  'JPEG',
  25,
  25,
  pdfWidth - 50,
  ((pdfWidth - 50) / canvas.width) * canvas.height
);
// preservation
pdf.save(`${this.exportName}.pdf`);

When instantiating jspdf,
The first parameter is the direction. If it is' p ', it is positive. If it is' l', it is reverse, which means that the pdf is horizontal. If the picture is embedded in the left side of the pdf, part of the right side of the pdf will be empty;
The second parameter is the unit, where 'mm' is taken.
The third parameter is the paper type. Take 'a4' or 'a5' here, but 'a4' paper is used more in printing.

In the addImage() method,
The third parameter is the distance. The distance between the picture and the top of pdf is 25mm;
The fourth parameter is the distance. The distance from the picture to the left of pdf is 25mm;
The fifth parameter is size and picture width, which is pdf width minus left and right blank 25mm * 2 = 50mm;
The fourth parameter is the size, which is calculated according to the width of pdf and the aspect ratio of the original size of the generated image to avoid being stretched and deformed.

Click export to generate a pdf file:

New jspdf ('p ',' mm ',' A4 ') is displayed below; And new jspdf ('l ',' mm ',' A4 '); Differences after pdf generation:

Tags: Javascript canvas html2canvas

Posted by mailtome on Mon, 23 May 2022 06:05:11 +0300