1. Demand background

During user registration, you need to download a template, print it, manually fill in the information and upload it for manual review. At present, the existing situation is that some of the user’s manual filling information is vague or non-standard, which leads to the failure of manual audit, accounting for most of the registration failure.

So some of the information we filled in on the H5 app we wanted to fill in the template, and then print it out to fill in the blanks.

According to the meaning of the product, you want to be able to generate images for users to save and download. The operation is easier than the OPERATION of PDF, will not appear after downloading PDF files users are not easy to find the situation. Therefore, I hope to produce pictures.

When it comes to filling templates on the back end, they currently only support generating PDF files. If you need to generate images directly back to the back end, you need to do research to find open source libraries, of course, our front end is indeed the same situation, and finally our front end to do this.

2. Program research

There are many NPM packages for PDF on the web, but I think they all end up using the most popular pdF.js on Github.

Github on PDFJS

Pdf.js is community-driven and supported by Mozilla. Our goal is to create a common, Web standards-based platform for parsing and rendering PDFS.

Then use it! Then start to look for all kinds of articles about PDFJS concrete practice on the Internet!

Finally, I should be able to fulfill my needs!

The following is my core source code implementation! Here I use the VUE framework for my project!

Install the PDFJS-dist package using NPM or YARN first

See PDFJS at github github.com/mozilla/pdf…

NPM I pdfjs-dist –save-dev@ Specifies the version

Yarn add pdfjs-dist@ Specifies the version –dev

Seriously recommended to refer to the version, the latest version may have problems ！！！！！

I’m using version 2.5.207 here

import * as PDFJS from 'pdfjs-dist/build/pdf'
import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.entry.js'
PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker
const pdfUrl = 'Back end returned to your PDF-URL address'
const CMapReaderFactory = {
  url: pdfUrl,
  / / cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/',
  // cMapPacked: true
}
Copy the code
    data() {
      return {
        pdfInstance: null.pdfPages: 0.imgUrl: ""}; },async getPdfInfo() {
      const loadingTask = PDFJS.getDocument(CMapReaderFactory);
      const pdfInfo = await loadingTask.promise; // Get the PDF instance
      this.pdfInstance = pdfInfo; // Set up the PDF instance
      this.pdfPages = pdfInfo.numPages; In this project, the template PDF is only one page, so it is not quite the same as most online versions
    },
    async createCanvas(pdfPages) {
      const canvas = document.createElement("canvas"); // Create the canvas tag
      console.log(canvas)
      const page = await this.pdfInstance.getPage(pdfPages); // Obtain a page information based on the PDF instance and the number of pages separated from the PDF

      console.log(page)

      const viewport = page.getViewport({ scale: 1 }); // Get page viewport information

      const context = canvas.getContext("2d"); // Returns an environment for drawing on a canvas
      canvas.width = viewport.width; // Set the canvas width
      canvas.height = viewport.height; // Set the canvas height
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };

      const renderTask =  page.render(renderContext); 
      renderTask.promise.then(() = > {
        const imgUrl = canvas.toDataURL('image/jpeg')
        this.imgUrl = imgUrl
      })
    }
Copy the code

3. Problems encountered during the investigation

Solution address: github.com/mozilla/pdf…

I’m not using CDN in this case

In this case, some fonts are unrecognizable.

Reference solution address: www.codeprj.com/blog/b37f86… Blog.csdn.net/m0_37903882…

My solution here is to communicate with the back end and ask him to unify the font format when filling the message!

  • There is no option to use CDN or increase packet volume size.
  • First, there may be instability or failure of CDN and we have no way to change it.
  • The other is to rely less on packages and project package size.

4. Find a more appropriate solution

Welcome to give some advice ~ I also hope that this article can help you looking for relevant solutions!

Reference links: blog.csdn.net/xxjiushini/…

www.jianshu.com/p/c4a885e67…