[Vue practice] page generation PDF file -01

introduce

Looking for a job, I spent seven or eight days finishing my online resume, only to find that no one looked at it.

To be honest, this is my first front and back end project, I feel good, but no one cares about it. It must be my poor performance, so I have to improve this project and add functions.

New download resume renderings:

Github address three months work experience looking for a front-end job

The canonical

Before you start building, you need to think about what you’re doing. If you don’t have access to the standard development processes of big companies, you’ll have to write your own.

If you know how to normalize development, please give me some reference links in the comments below :smile_cat:

Create Issue

Think about the current things TODO, put the corresponding Issue, and add the corresponding labels TODO, Feature; Find handlers for this function; Add it to the corresponding kanban

Modify the kanban

Add all requirements To To do, and then move those that will be processed immediately To In Progress

Create a branch

To prepare the Github Flow workflow, first create a branch and clone it locally

git branch -av
Create a local branch and establish the association
git checkout -b feature/download_pdf origin/feature/download_pdf 
Copy the code

The function development

Install dependencies

I chose idea 1, which uses Canvas for implementation and installs dependencies

npm i html2canvas -S
npm i jspdf -S
Copy the code

Registered function

This function will be registered as a global plug-in to call, as usual, put it in the plugins folder, import dependencies, register a set of go:

// Create the plug-in pdf.js
// Introduce 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 the plug-in in main.js
import "./plugins/pdf";

// Fire the method in place
this.$pdf(); // hello world
Copy the code

Into a Canvas

First, we need to convert HTML to Canvas. Let’s see how HTML2Canvas is handled:

Very simple syntax, just get the DOM.

Add ref attribute

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

Pass the DOM to the triggering event

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

Testing DOM results

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

usehtml2canvas

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

Go to the page and you’ll get a perfect Canvas

Print to PDF

Next, it is processed into a PDF. Take a look at the official website to see how it is processed:

As simple as it seems, provide a picture (Base64) and you can generate it. As we know, Canvas can be converted to image (base64). The image format given in the example is JPEG, so Canvas is also processed as JPEG:

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");
});
Copy the code

Ok, let’s test the results:

The resume has been generated, but if something is wrong, look at the document and redo it:

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");
});
Copy the code

If your CV is longer than an A4 page, 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);
});
Copy the code

All right, we’re done. Success is shown in the introduction.

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

Bug

It’s just barely done, and when you split it, it causes the continuous content to break up, and it feels like it takes a long time…

Reference documentation

html2canvas
jspdf
toDataURL