純前端匯出pdf檔案

2022-07-20 07:15:13 字數 957 閱讀 5855

純前端js匯出pdf,已經用於生產環境。

工具: 1、html2canvas,一種讓html轉換為的工具。

2、pdfmake或者jspdf ,一種生成、編輯pdf,並且匯出pdf的工具。

pdfmake:

優點: 能夠支援中文,具有部分自適應布局功能,需要vfs_fonts.js 字型檔案。

生成vfs_fonts.js 檔案的方法如圖,npm install pdfmake, 新增examples/fonts資料夾,再在裡面放入需要的.ttf檔案。再 gulp buildfonts 生產檔案,檔案在存放在build中。一般js檔案會比.ttf檔案大一倍,目前發現黑體比較小,1.5m左右。

第二種 jspdf

優點:按照background-position 來定位到pdf中。

純前端匯出pdf檔案,不僅需要分頁,也需要pdf清晰。這兩個難題都是有技巧可以解決的。目前我使用的方法是 使用html2canvas將html轉換為,再用jspdf將一張一張貼到pdf中。

分頁:不管jspdf還是pdfmake都需要使用高度較小的,高度越小,分頁效果就越好。所以乙個table盡量乙個tr就是一張圖。如此分頁時後只要判斷下一張貼上去後是否會超過pdf內容區(你可以設定頁首頁尾,左右邊距高度)高度,超過了就換頁。

pdf清晰度:如果利用了echart之類,一定要用它給的api獲取dataurl,設定解析度倍數多一點,匯出的非常清晰,這樣生產的pdf才會清晰。如果是普通元素,如果發現匯出的不夠清晰,可以專門寫乙個用於匯出的頁面。此頁面所有內容都放大2 倍,然後設定left:-9999隱藏(不可display:none)。當html2canvas轉換此頁面的為的時候,會非常大,然後使用pdf編輯工具讓等比縮放,會很清晰。html2canvas option裡也有個scale引數,也可以調,但太大會報錯。

java匯出pdf檔案

本文使用的是com.itextpdf,用servlet匯出,匯出的結果帶邊框。要注意的一下,別忘記設定contenttype 另外如果發現 長寬不好調整,可以嘗試修改紙張型別a3 a4 document document new document pagesize.a3 步驟如下 1.引入到pom ...

Python 讀取純文字PDF檔案

匯入系統庫 import sys import importlib 對importlib做處理,讓其載入sys importlib.reload sys from pdfminer.pdfparser import pdfparser,pdfdocument from pdfminer.pdfint...

純前端匯入EXCEL檔案

1.使用工具 xlsx 2.功能說明 將excel檔案資料匯入到頁面上進行渲染 3.檔案上傳我用的是antd的upload.dragger 取消匯入檔案 選擇檔案 僅支援.xls或.xlsx檔案型別 攜帶表頭 不攜帶表頭 3.在beforeupload中對檔案資料進行二進位制處理 beforeupl...