[Vue Practice] Page Generation PDF File-01

Time:2019-10-9

introduce

In order to find a job, I spent seven or eight days completing my online resume and found that no one came to see it.

To tell you the truth, this is my first front-end and back-end project. I feel good about myself. As a result, nobody cares at all. I must be doing too badly. Then I have to change this project and add functions.

New effect map of downloaded resume:

[Vue Practice] Page Generation PDF File-01

Advertisement:
Github address
Three months’work experience to find front-end jobs

Standardization

Before starting the project, we need to consider what we have done. If we do not have access to the normative development process of large companies, we have to compile one by ourselves.

If you know how to develop standardization, I hope you can give me some reference links in the comments below.

Create Issues

[Vue Practice] Page Generation PDF File-01

Think about what you are going to do now, mention the corresponding Issue, and add the corresponding tags TODO, Feature; find a handler for this function; add it to the corresponding Kanban.

Modify Kanban

[Vue Practice] Page Generation PDF File-01

Add all requirements to To do, and move immediate processing to In progress

Creating Branches

[Vue Practice] Page Generation PDF File-01

To prepare for Github Flow workflow, first create a branch that is cloned locally

git branch -av
# Create local branches and associations
git checkout -b feature/download_pdf origin/feature/download_pdf

Function Development

Installation dependency

Choose Idea 1, using canvas to implement, install dependencies

npm i html2canvas -S
npm i jspdf -S

Registration function

This function will be registered as a global plug-in for invocation, according to custom, put it inpluginsUnder the folder, introduce dependencies and register a set of steps:

// Create Plug-in pdf.js
// Introducing dependencies
import Vue from "vue";
import html2canvas from "html2canvas";
import jspdf from "jspdf";

const PDF = {};
// eslint-disable-next-line no-unused-vars
PDF.install = function(Vue, options) {
  Vue.prototype.$pdf = function() {
    // eslint-disable-next-line no-console
    console.log("hello pdf");
  };
};

Vue.use(PDF);

export default PDF;


// Register plug-ins in main.js
import "./plugins/pdf";

// Triggering Method in Corresponding Places
this.$pdf(); // hello world

Convert to Canvas

First you need to convert HTML to Canvas, and take a look at ithtml2canvasHow to deal with it:

[Vue Practice] Page Generation PDF File-01

Very simple grammar, just get DOM.

Add ref attribute

<share-page v-if="!shareLoading" ref="pdfPage"></share-page>

Pass DOM to the trigger event

<script>
export default {
  methods: {
    download() { 
      this.$pdf(this.$refs.pdfPage.$el);
    }
  } 
}
</script>

Testing DOM results

Vue.prototype.$pdf = function(dom) {
  // eslint-disable-next-line no-console
  Console. log (dom); // Get the desired result
};

Usehtml2canvas

Vue.prototype.$pdf = function(dom) {
  html2canvas(dom).then(canvas => {
    dom.appendChild(canvas);
  });
};

Go to the page to see, you can get a perfect effect of Canvas

Print as PDF

The next step is to process it into PDF and see how it works on the official website.

[Vue Practice] Page Generation PDF File-01

It looks very simple. Provide a picture (base64) and you can generate it. We know that canvas can be converted to a picture (base64). The image format given in the example isjpegSo canvas is also treated asjpeg

html2canvas(dom).then(canvas => {
  const jpeg = canvas.toDataURL("image/jpeg");
  const doc = new JsPDF();

  doc.setFontSize(40);
  Doc. text (35, 25,'resume');
  doc.addImage(jpeg, "JPEG", 15, 40, 180, 160);
  Doc. save ("resume");
});

Well, test the results.

[Vue Practice] Page Generation PDF File-01

The resume is created, but something is wrong. Look at the document and do it again.

html2canvas(dom).then(canvas => {
  const [AWidth, AHeight] = [595.28, 841.89]; // a4
  const { width: CWidth, height: CHeight } = canvas;
  const PWidth = AWidth;
  const PHeight = (AWidth / CWidth) * CHeight;
  const jpeg = canvas.toDataURL("image/jpeg", 1.0);
  const doc = new JsPDF("", "pt", "a4");

  doc.addImage(jpeg, "JPEG", 0, 0, PWidth, PHeight);
  Doc. save ("resume");
});

One operation found that the resume length exceededa4If the height of the paper is higher, add another page to it.

Vue.prototype.$pdf = function(dom, user) {
html2canvas(dom).then(canvas => {
  const [AWidth, AHeight] = [595.28, 841.89]; // a4
  let position = 0;
  let { width: CWidth, height: CHeight } = canvas;
  const PWidth = AWidth;
  const PHeight = (AWidth / CWidth) * CHeight;
  const jpeg = canvas.toDataURL("image/jpeg", 1.0);
  const doc = new JsPDF("", "pt", "a4");

  if (CHeight < PHeight) {
    doc.addImage(jpeg, "JPEG", 0, 0, PWidth, PHeight);
  } else {
    while (CHeight > 0) {
      doc.addImage(jpeg, "JPEG", 0, position, PWidth, PHeight);
      CHeight -= PHeight;
      position -= AHeight;
      if (CHeight > 0) {
        doc.addPage();
      }
    }
  }
  doc.save(user);
});

Well, it’s a great success, and the results are shown in the introduction.

Finally, submit, review, merge branches, and publish code.

Bug

It can only be counted as a barely finished process, which can lead to the separation of consecutive content. This feeling takes a long time…

Reference Documents

  1. html2canvas
  2. jspdf
  3. toDataURL

Recommended Today

Mongoose error: getaddrinfo ENOTFOUND localhost localhost:27017

{ Error: getaddrinfo ENOTFOUND localhost localhost:27017 at errnoException (dns.js:50:10) at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:92:26) code: ‘ENOTFOUND’, errno: ‘ENOTFOUND’, syscall: ‘getaddrinfo’, hostname: ‘localhost’, host: ‘localhost’, port: 27017 } mongoose.connect(‘mongodb://localhost:27017/db1’,{ poolSize:5, useNewUrlParser: true },err=>{ if(err){ console.error(err) }else { Console.log (‘mongodb successfully connected ‘) } }) Try changing localhost to 127.0.0.1 mongoose.connect(‘mongodb://127.0.0.1:27017/db1’,{ poolSize:5, useNewUrlParser: true },err=>{ if(err){ console.error(err) […]