Teach you two tricks to easily export Html pages to PDF files

[[398656]]

This article is reprinted from the WeChat public account "Milo who loves to write bugs", the author is Milo. To reprint this article, please contact the WeChat public account of Milo who loves to write bugs.

Hi, everyone. I am Milo. Recently, I encountered a problem in my project where I need to export HTML pages to PDF files. Now I share the relevant content and hope to help partners in need.

Demand scenario

In the bidding software, after each bidding section is completed, a bid evaluation report will be generated.

The bid evaluation report mainly includes project information, bid section information, bidder information, bidder quotation, bid evaluation expert scoring, etc. Relatively speaking, the amount of information is relatively large. What should we do if we want to export the bid evaluation report?

• Export html page directly to pdf
• Backend assembly page, export pdf

Comparing the two methods, it is obvious that the first method is superior. It is easy to implement and avoids the embarrassment of changing the export function code due to page changes.

Solution Research

After consulting some information, the popular solutions on the market are mainly the following

• wkhtmltopdf
• iText
• html2canvas+jsPDF

The first two are backend implementations, and the third is a pure frontend implementation;

First let's take a look at wkhtmltopdf

From github, we can see that wkhtmltopdf has 11.1K stars, which shows how popular it is. After testing, I found that it has the best effect. However, since our project uses vue, it seems that it does not support vue syntax. So I had to settle for the second best and use other technologies to achieve it.

Next, let's take a look at the html2canvas+jsPDF method

This method is implemented by using the above two open source projects. It is called a roundabout way to save the country on the Internet. First, we use html2canvas to save the HTML webpage as a canvas image, and then we use jsPDF to generate a PDF file from the canvas image. So the PDF file we finally get is not a real PDF file, but a picture. This also makes it impossible for us to edit the PDF file. And the quality is also average.

Finally, let's take a look at iText

itext7 seems to be the latest version. This method is suitable for maintaining PDF templates and then dynamically adding content. Friends in need can learn about it.

Since our project front-end uses Vue, after testing, I found that wkhtmltopdf does not seem to support Vue syntax. It may also be that I use it improperly. Welcome to correct me. Moreover, itext7 is more used in scenarios where PDF templates need to be maintained, which is not suitable for my needs this time. So I finally use html2canvas+jsPDF to achieve it.

Real-life examples

html2canvas+jsPDF

Now, let's take a look at the implementation of html2canvas+jsPDF

First, you need to import the dependency files of html2canvas and jsPDF. You can download them from the official website. I will also put a copy in the resource package at the end of the article for your convenience.

 //Export pdf file [html2canvas&&jspdf combination]
 getPdf: function () {
 var that = this;
 //Hide unnecessary buttons
           that.buttonShow = !that.buttonShow;
 //If you don't write it, you will get an error
           window.jsPDF = window.jspdf.jsPDF;
 //Save the contents of the body as an image
           var html2canvas1 = html2canvas(document.body, {
 //Cross-domain image loading
               useCORS: true ,
               onrendered: function (canvas) {
                   var contentWidth = canvas.width
                   var contentHeight = canvas.height
 //One page of PDF displays the canvas height generated by the HTML page
                   var pageHeight = contentWidth / 592.28 * 841.89
 //Height of HTML page without PDF generation
                   var leftHeight = contentHeight
 //page offset
                   var position = 0
 //The size of a4 paper [595.28,841.89] The width and height of the canvas generated by the html page in the pdf
                   var imgWidth = 595.28
                   var imgHeight = 592.28/contentWidth * contentHeight
 //Get the base64 data of the image
                   var pageData = canvas.toDataURL( 'image/jpeg' , 1.0)
                   //document.body.appendChild(canvas);
                   var PDF = new jsPDF( '' , 'pt' , 'a4' );
                   if (leftHeight < pageHeight) {
                       PDF.addImage(pageData, 'JPEG' , 0, 0, imgWidth, imgHeight)
 } else {
 //Pagination
                       while (leftHeight > 0) {
                           PDF.addImage(pageData, 'JPEG' , 0, position, imgWidth, imgHeight)
                           leftHeight -= pageHeight
                           position -= 841.89
                           if (leftHeight > 0) {
                               PDF.addPage()
 }
 }
 }
 //Download pdf
 var save = PDF.save(that.sectionInfo.sectionName+ "Tender Evaluation Report" + '.pdf' );
 //Convert the pdf file into a blob object
                   var blob = save. output ( "blob" );
 //Save the pdf file to the server
                   that.savePdf(blob)
 },
 });
 },

Since this method is purely front-end implementation, if we want to save a copy of the PDF to the server, we need to manually upload the file to the server.

wkhtmltopdf

Next, let's take a look at how wkhtmltopdf is implemented.

If we want to use wkhtmltopdf, we need to install the official software, which you can download from its official website.

https://wkhtmltopdf.org/downloads.html

After the installation is complete, we need to configure the installation path in our tool class.

 public class WKHtmlToPdfUtil {
    private static final String WINDOWS_URL = "D:/wkhtmltopdf/bin/wkhtmltopdf.exe" ;
    private static final String LINUX_URL = "/opt/wkhtmltox/bin/wkhtmltopdf" ;

Let's take a look at how to use it. We need to concatenate the paths of the pages we exported and pass them in as parameters.

 String serverUrl = request.getScheme() + "://" + request.getServerName()+ ":" +request.getServerPort();
 //Assemble the address of the page that needs to be exported
       serverUrl += request.getContextPath()+ "/" ;
           serverUrl += "evaluate/report/evaluateSectionReport?projectId=" +projectId+ "&sectionId=" +sectionId;
           logger.info(serverUrl);
 // Tool class call
       exportPdf(serverUrl,response);

 /**
 * @Title: Export pdf to server
 * @param
 * @return  
 */
 public   static void exportPdf(String serverUrl, HttpServletResponse response){
 try {
           ArrayList<String> urlList = new ArrayList<>();
           urlList.add (serverUrl);
           String folder = Global .getProfile() + "resultReports/" ;
 // Check if all directories in this path exist, if not, create them
           File file = new File(folder);
           if(!file.exists() && !file.isDirectory()){
 // mkdir() creates the directory specified by this abstract pathname. If the parent directory does not exist, the creation fails.
 // mkdirs() creates the directory specified by this abstract pathname, including any required but non-existent parent directories
 file.mkdirs();
 }
 // Generate a random attachment path (timestamp + 4-digit random number)
           Random random = new Random();
           String fileName = "milolee" +random.nextInt(10);
 //In the resource package, download it yourself
           WKHtmlToPdfUtil.htmlToPdf(urlList, folder+fileName+ ".pdf" );
 //In the resource package, download it yourself
 // Generate the transaction notice pdf file to the server and then download it to the client
           FileUtils.downLoadFile(folder,fileName+ ".pdf" ,response); 
            
 } catch (Exception e) {
           e.printStackTrace();
 }
 }

I put the tool classes WKHtmlToPdfUtil and FileUtils in the resource package. You can download them by yourself. There are too many of them, so I won’t paste them one by one.

Next, let's take a look at the effect of exporting my CSDN homepage, which is still great.

summary

This article mainly introduces how to export HTML pages to PDF files. I hope to give some ideas to friends who encounter similar needs. If you haven’t encountered it, you can also collect it. It may be useful in the future.

Since there are a lot of codes designed in this article, I will package and upload them to csdn, and you can download them by yourself