【Vue 實踐】頁面生成 pdf 文件-01

介紹

爲了找工做，花了七八天完成了本身的線上簡歷，結果發現並無人來看這東西。

說實話，這個是本身的第一個先後端項目，自我感受還好，結果根本沒人在乎，必定是我作得太差，那就得好好改這個項目，增長功能。

新增的下載簡歷效果圖：

廣告：
Github 地址
三個月工做經驗找前端工做

規範化

在開始動工以前，須要考慮本身作什麼了，沒有接觸大公司的規範的開發流程，那也得本身編一個出來。

若是有了解如何進行規範化開發的，但願可以在下方評論處給予我一些參考連接

建立 Issue

想一下目前要作的事情，提上對應的 Issue，再加上對應的標籤 TODO 、Feature；爲這個功能找處處理者；將其添加到對應的 看板

修改看板

將全部的需求添加至 To do，再將要當即處理的移至 In progress

建立分支

準備採用 Github Flow 的工做流，首先建立一個分支，在克隆到本地

git branch -av
# 建立本地分支並創建關聯
git checkout -b feature/download_pdf origin/feature/download_pdf

功能開發

安裝依賴

選取的是想法1，利用 canvas 來實現，安裝相關的依賴

npm i html2canvas -S
npm i jspdf -S

註冊功能

這個功能將會被註冊爲全局的插件進行調用，按照習慣，將其放入 plugins 文件夾下，引入依賴，註冊一套走起：

// 建立插件 pdf.js
// 引入依賴
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;


// 在 main.js 中註冊插件
import "./plugins/pdf";

// 在對應的地方觸發方法
this.$pdf(); // hello world

轉爲 Canvas

首先需將 HTML 轉爲 Canvas，看一下 html2canvas 是怎麼處理的：

很簡單的語法，獲取 DOM 就能夠了。

增長 ref 屬性

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

將 DOM 傳遞到 觸發事件中

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

測試 DOM 結果

Vue.prototype.$pdf = function(dom) {
  // eslint-disable-next-line no-console
  console.log(dom); // 獲得指望結果
};

使用 html2canvas

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

前往頁面查看，能夠獲得一個完美效果的 Canvas

打印爲 PDF

接下來是處理成 pdf，看一下官網它是怎麼處理的：

看起來很簡單，提供一張圖片（base64），而後就能夠生成了。咱們知道 canvas 是能夠轉爲 圖片（base64） 的，示例中給的圖片格式是 jpeg，因此 canvas 也處理爲 jpeg ：

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

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

好了，測試一下結果吧：

簡歷是生成了，可是未免有些不對勁，看一下 文檔 從新搞吧：

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("簡歷");
});

一頓操做發現簡歷長度超過 a4 紙的高度了，那就再給它增長一頁，此處 參考：

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);
});

好了，大功告成，成功結果在介紹中展現了。

最後，提交，review，合併分支，發佈代碼。

Bug

僅能算做勉強完成，分割時會致使連續的內容分開，這個感受會耗時好久……

參考文檔

1. html2canvas
2. jspdf
3. toDataURL