Node.js實現(xiàn)文本與pdf相互轉(zhuǎn)換的代碼詳解
pdf 轉(zhuǎn)文本
主要使用 pdf-parse 這個庫,直接識別提取我們 pdf 文件中的文字。
const express = require("express");
const fs = require("fs");
const PDFParser = require("pdf-parse");
const cors = require("cors");
const pdfFilePath = "./xxx_實習生.pdf";
const app = express();
// 解決跨域問題
app.use(cors());
app.use(express.static(__dirname));
app.use(express.json());
app.post("/form2pdf", (req, res) => {
console.log(req.body);
const str = "";
// 1. 讀取pdf文件
fs.readFile(pdfFilePath, (err, pdfBuffer) => {
if (err) {
console.log(err);
return;
}
PDFParser(pdfBuffer).then((pdfData) => {
const pages = pdfData.text.split("\n\n");
console.log(pages);
let str;
for (let i = 1; i < pages.length; i++) str = str + pages[i];
console.log(str);
});
});
});
app.listen(3000, () => {
console.log("Server is running on port 3000");
});

文本轉(zhuǎn) pdf
主要使用 pdfkit 這個庫將文本轉(zhuǎn)為pdf文件。
const express = require("express");
const fs = require("fs");
const cors = require("cors");
const PDFDocument = require("pdfkit");
const app = express();
// 解決跨域問題
app.use(cors());
app.use(express.static(__dirname));
app.use(express.json());
app.post("/form2pdf", (req, res) => {
console.log(req.body);
const str = "";
// 使用 pdfkit 生成pdf
// 創(chuàng)建 PDF 文檔
const doc = new PDFDocument({
margin: 50, // 控制上下左右留白
});
// 輸出到文件
// 如果有同名的 直接覆蓋
doc.pipe(fs.createWriteStream("output.pdf"));
// ========== Header ==========
function addHeader(doc) {
doc.fontSize(20).text(req.body.name, { align: "center" }).moveDown();
doc
.moveTo(50, doc.y) // 從左邊開始畫橫線
.lineTo(550, doc.y) // 到右邊
.stroke();
doc.moveDown();
}
// ========== Footer ==========
function addFooter(doc) {
const range = doc.bufferedPageRange(); // 所有頁
for (let i = range.start; i < range.start + range.count; i++) {
doc.switchToPage(i);
doc
.fontSize(10)
.fillColor("gray")
.text(`第 ${i + 1} 頁`, 0, doc.page.height - 50, {
align: "center",
});
}
}
// ========== Body ==========
function addBody(doc) {
doc.fontSize(12);
doc.text(req.body.name + " " + req.body.sex + " " + req.body.age, {
align: "left",
lineGap: 4,
});
}
// 添加內(nèi)容
addHeader(doc);
addBody(doc);
// 結(jié)束前添加 footer(多頁也有效)
doc.end();
doc.on("end", () => {
addFooter(doc);
});
// 把后端的pdf地址返回給前端
res.json({
code: 200,
data: "http://localhost:3000/output.pdf",
});
res.send("PDF generated successfully!");
});
app.listen(3000, () => {
console.log("Server is running on port 3000");
});

瀏覽器緩存引發(fā)的小問題
之前自己寫 demo,遇到一個小問題,可能剛剛?cè)腴T的小白一時找不到原因,特此記錄下:
- 后端生成pdf文件,但是名稱都相同(而且由于前端通過 iframe 渲染 pdf 的url 地址,url 地址也相同)
- 盡管內(nèi)容不同,但是瀏覽器發(fā)現(xiàn)相同的名稱pdf(靜態(tài)文件),會繼續(xù)使用緩存,導致后端pdf雖然重新覆蓋生成,但是前端瀏覽器中的 iframe 渲染的 pdf 還是舊的(緩存中的)。

解決方法是:
<iframe :src="url" width="100%" height="1200px"></iframe>
const onSubmit = () => {
axios.post("http://localhost:3000/form2pdf", form).then((res) => {
url.value = res.data.data + "?t=" + Date.now();
console.log(url);
});
};
添加一個時間戳來阻止瀏覽器繼續(xù)使用緩存,以保證每次重新請求都可以渲染最新的pdf 文件數(shù)據(jù)。


- 瀏覽器為什么會緩存 PDF?
靜態(tài)資源(如 PDF、圖片、JS、CSS)默認會被瀏覽器緩存。
這是因為 Express 的 express.static() 中間件會自動為靜態(tài)資源設(shè)置緩存相關(guān)的 HTTP 頭(如 Cache-Control),讓瀏覽器下次訪問同樣的 URL 時直接用本地緩存,加快加載速度、減少服務(wù)器壓力。
只要 URL 一樣,且沒有特殊的禁止緩存設(shè)置,瀏覽器就會優(yōu)先用緩存。
如果在 /form2pdf 路由里加了:
res.setHeader("Cache-Control", 'no-store');
但這個 header 只作用于 /form2pdf 這個接口的響應(yīng),對 output.pdf 這個靜態(tài)文件的響應(yīng)沒有影響。output.pdf 的響應(yīng)是由 express.static(__dirname) 處理的,和接口響應(yīng)頭無關(guān)。
- 為什么加參數(shù)能解決?
當你訪問 output.pdf?t=xxx 時,瀏覽器認為這是一個全新的資源(即使實際文件一樣),所以會重新請求服務(wù)器,不會用緩存。
- 如何讓靜態(tài) PDF 不被緩存?
可以讓 Express 靜態(tài)資源響應(yīng)時加上禁止緩存的 header:
app.use(express.static(__dirname, {
setHeaders: (res, path) => {
if (path.endsWith('.pdf')) {
res.setHeader('Cache-Control', 'no-store');
}
}
}));
這樣瀏覽器每次都會重新請求 PDF 文件。
到此這篇關(guān)于Node.js實現(xiàn)文本與pdf相互轉(zhuǎn)換的代碼詳解的文章就介紹到這了,更多相關(guān)Node.js文本與pdf互轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Node.js入門教程:在windows和Linux上安裝配置Node.js圖文教程
這篇文章主要介紹了Node.js入門教程:在windows和Linux上安裝配置Node.js的方法,本文圖文并茂,步驟明細,是學習安裝node.js的絕佳教程,需要的朋友可以參考下2014-08-08
node連接MySQL數(shù)據(jù)庫的3種方式總結(jié)
現(xiàn)在前端基本上都會用一些NodeJs,想必也想自己寫一些API或者個人博客的后臺系統(tǒng),這些就離不開連接數(shù)據(jù)庫的問題,下面這篇文章主要給大家介紹了關(guān)于node連接MySQL數(shù)據(jù)庫的3種方式,需要的朋友可以參考下2022-08-08
nodejs創(chuàng)建簡易web服務(wù)器與文件讀寫的實例
下面小編就為大家?guī)硪黄猲ode js系列課程-創(chuàng)建簡易web服務(wù)器與文件讀寫的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
node.js中fs文件系統(tǒng)模塊的使用方法實例詳解
這篇文章主要介紹了node.js中fs文件系統(tǒng)模塊的使用方法,結(jié)合實例形式詳細分析了node.js fs文件系統(tǒng)模塊各種常見方法的基本使用技巧與相關(guān)操作注意事項,需要的朋友可以參考下2020-02-02
基于nodejs的微信JS-SDK簡單應(yīng)用實現(xiàn)
這篇文章主要介紹了基于nodejs的微信JS-SDK簡單應(yīng)用實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
nodejs環(huán)境使用Typeorm連接查詢Oracle數(shù)據(jù)
這篇文章主要介紹了nodejs環(huán)境使用Typeorm連接查詢Oracle數(shù)據(jù),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12

