有關前端和pdf相關的幾件事

pdf（Portable Document Format的簡稱，意爲「便攜式文檔格式」）

前端工做中，也避免不了要和pdf打交道，如下列一些相關的信息

預覽pdf的方法

經過瀏覽器本身的能力

1. 直接<a href="pdf地址" >打開新的頁面
2. iframe/object <iframe src="pdf地址">
3. embed <embed :src="previewUrl" type="application/pdf"

以上幾種方法都存在跨域問題
固然其中pdf瀏覽器的樣式都是瀏覽器自帶的，若是想要自定義，可能會比較無力

經過相關的庫

1. pdfobject 其實也是基於embed方案的
2. pdf.js pdfjs適用於自定義顯示方案的，可是依賴webworker，兼容性可能不行

pdf.js

pdf.js 若是是經過npm安裝的話，可能會遇到import相關的問題，這個時候改用pdfjs-dist/webpack就能夠正常引入啦，不過包比較大，仍是建議使用cdn

生成pdf的方法

有經過前端/後端等多種方法，生成的pdf也分爲純圖片/文字+圖片的類型

經過後端

1. puppeteer 無頭瀏覽器，網頁生成pdf
2. jsPdf + html2canvas, 頁面生成圖片以後扔進jsPdf中
3. jsPdf, 純js方案生成，缺點是須要本身計算每一個元素的位置
4. pdfmake 經過定義js對象來進行pdf,缺點是引入字體包致使整個依賴比較大，體驗上比較好