快捷導(dǎo)航

Node.js實(shí)現(xiàn)文本與pdf相互轉(zhuǎn)換的代碼詳解

更新時(shí)間：2025年07月09日 10:24:44 作者：Heo

在IT行業(yè)中,文檔格式轉(zhuǎn)換是日常工作中的常見需求,Word與PDF是兩種廣泛應(yīng)用的文檔格式,它們各有優(yōu)勢(shì),但有時(shí)需要相互轉(zhuǎn)換以滿足特定場(chǎng)景的需求,本篇將詳細(xì)講解如何使用Node.js實(shí)現(xiàn)文本與pdf相互轉(zhuǎn)換,需要的朋友可以參考下

pdf 轉(zhuǎn)文本

主要使用 pdf-parse 這個(gè)庫(kù)，直接識(shí)別提取我們 pdf 文件中的文字。

const express = require("express");
const fs = require("fs");
const PDFParser = require("pdf-parse");
const cors = require("cors");

const pdfFilePath = "./xxx_實(shí)習(xí)生.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 這個(gè)庫(kù)將文本轉(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(); // 所有頁(yè)

    for (let i = range.start; i < range.start + range.count; i++) {
      doc.switchToPage(i);
      doc
        .fontSize(10)
        .fillColor("gray")
        .text(`第 ${i + 1} 頁(yè)`, 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（多頁(yè)也有效）
  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，遇到一個(gè)小問題，可能剛剛?cè)腴T的小白一時(shí)找不到原因，特此記錄下：

后端生成pdf文件，但是名稱都相同（而且由于前端通過 iframe 渲染 pdf 的url 地址，url 地址也相同）
盡管內(nèi)容不同，但是瀏覽器發(fā)現(xiàn)相同的名稱pdf（靜態(tài)文件），會(huì)繼續(xù)使用緩存，導(dǎo)致后端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);
  });
};

添加一個(gè)時(shí)間戳來阻止瀏覽器繼續(xù)使用緩存，以保證每次重新請(qǐng)求都可以渲染最新的pdf 文件數(shù)據(jù)。

瀏覽器為什么會(huì)緩存 PDF？

靜態(tài)資源（如 PDF、圖片、JS、CSS）默認(rèn)會(huì)被瀏覽器緩存。
這是因?yàn)?Express 的 express.static() 中間件會(huì)自動(dòng)為靜態(tài)資源設(shè)置緩存相關(guān)的 HTTP 頭（如 Cache-Control），讓瀏覽器下次訪問同樣的 URL 時(shí)直接用本地緩存，加快加載速度、減少服務(wù)器壓力。

只要 URL 一樣，且沒有特殊的禁止緩存設(shè)置，瀏覽器就會(huì)優(yōu)先用緩存。

如果在 /form2pdf 路由里加了：

res.setHeader("Cache-Control", 'no-store');

但這個(gè) header 只作用于 /form2pdf 這個(gè)接口的響應(yīng)，對(duì) output.pdf 這個(gè)靜態(tài)文件的響應(yīng)沒有影響。
output.pdf 的響應(yīng)是由 express.static(__dirname) 處理的，和接口響應(yīng)頭無關(guān)。

為什么加參數(shù)能解決？

當(dāng)你訪問 output.pdf?t=xxx 時(shí)，瀏覽器認(rèn)為這是一個(gè)全新的資源（即使實(shí)際文件一樣），所以會(huì)重新請(qǐng)求服務(wù)器，不會(huì)用緩存。

如何讓靜態(tài) PDF 不被緩存？

可以讓 Express 靜態(tài)資源響應(yīng)時(shí)加上禁止緩存的 header：

app.use(express.static(__dirname, {
  setHeaders: (res, path) => {
    if (path.endsWith('.pdf')) {
      res.setHeader('Cache-Control', 'no-store');
    }
  }
}));

這樣瀏覽器每次都會(huì)重新請(qǐng)求 PDF 文件。

到此這篇關(guān)于Node.js實(shí)現(xiàn)文本與pdf相互轉(zhuǎn)換的代碼詳解的文章就介紹到這了,更多相關(guān)Node.js文本與pdf互轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: