爲了找工做,花了七八天完成了本身的線上簡歷,結果發現並無人來看這東西。javascript
說實話,這個是本身的第一個先後端項目,自我感受還好,結果根本沒人在乎,必定是我作得太差,那就得好好改這個項目,增長功能。html
新增的下載簡歷效果圖:前端
廣告:
Github 地址
三個月工做經驗找前端工做
在開始動工以前,須要考慮本身作什麼了,沒有接觸大公司的規範的開發流程,那也得本身編一個出來。vue
若是有了解如何進行規範化開發的,但願可以在下方評論處給予我一些參考連接
想一下目前要作的事情,提上對應的 Issue,再加上對應的標籤 TODO 、Feature;爲這個功能找處處理者;將其添加到對應的 看板java
將全部的需求添加至 To do,再將要當即處理的移至 In progressgit
準備採用 Github Flow 的工做流,首先建立一個分支,在克隆到本地github
git branch -av # 建立本地分支並創建關聯 git checkout -b feature/download_pdf origin/feature/download_pdf
選取的是想法1,利用 canvas 來實現,安裝相關的依賴npm
npm i html2canvas -S npm i jspdf -S
這個功能將會被註冊爲全局的插件進行調用,按照習慣,將其放入 plugins
文件夾下,引入依賴,註冊一套走起:canvas
// 建立插件 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
首先需將 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,看一下官網它是怎麼處理的:
看起來很簡單,提供一張圖片(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,合併分支,發佈代碼。
僅能算做勉強完成,分割時會致使連續的內容分開,這個感受會耗時好久……