夜雨聆风
上周产品经理甩过来一个需求："用户上传合同 PDF，要能直接转成可编辑的 Word，而且文件不能走服务器。"我当时第一反应是——纯前端转 PDF 到 Word？这玩意儿能行吗？
折腾了两天，踩了一堆坑，总算跑通了。今天把整个过程捋一遍，从技术选型到完整组件封装，看完你也能在自己的项目里落地。
说实话，刚接到需求的时候我搜了一圈，发现方案五花八门，但真正适合纯前端的没几个。我把主流方案都试了一遍，大概分这么几类：
第一类是后端转换。用 LibreOffice 或者 Python 的 pdf2docx 库在服务器上转，前端只管上传下载。这个方案最稳，格式还原度也高，但缺点很明显——文件要经过服务器，敏感合同不安全，而且每次转换都要等后端处理。
第二类是前端纯解析。用 pdf.js 把 PDF 里的文字抠出来，再用 docx 库生成 Word 文件。这个方案文件不离开用户浏览器，速度也快，但只能提取文字，表格、图片、复杂排版基本都丢了。
第三类是 WASM 方案。把 LibreOffice 或者其他转换工具编译成 WebAssembly，在浏览器里运行。理论上格式还原度高，但包体巨大（几十 MB），加载慢，兼容性也一般。
我拉了个表，几个方案的对比一目了然：
你发现没有，没有一个方案能同时做到"格式完美 + 纯前端 + 轻量"。我们项目的需求是合同文字提取后小修，格式不需要精确还原，所以最终选了 pdf.js + docx 这个组合——轻量、安全、够用。
整个方案的核心思路特别简单：pdf.js 把 PDF 里的文字抠出来，docx 把文字写成 Word 文件。一个负责读，一个负责写，中间用数组传递数据。
先装依赖，两个包就够了：
# 安装 pdfjs-dist（PDF 解析）和 docx（Word 生成）npm install pdfjs-dist docx# 如果你用的是 pnpm 或 yarn# pnpm add pdfjs-dist docx# yarn add pdfjs-dist docx这里解释一下两个库的分工：
pdfjs-dist是 Mozilla 官方的 PDF 解析库，Chrome 和 Firefox 的 PDF 查看器底层就是它。我们只用它的文字提取功能，不用它的渲染能力。
docx是一个纯 JS 的 Word 文档生成库，可以在浏览器里创建 .docx 文件，不需要任何后端依赖。
pdf.js 有个坑——它需要一个 Worker 文件来做 PDF 解析，不能直接在主线程里跑。Worker 的配置方式有两种，各有优劣。
最简单的方式，直接指向 cdnjs 上的 worker 文件，用pdfjs.version自动匹配版本，不会出现版本不匹配的问题。
// src/utils/pdfConfig.js// pdf.js Worker 配置：两种方式二选一import * as pdfjs from'pdfjs-dist'// ========== 方式一：CDN 加载（推荐，打包体积小） ==========// 自动匹配当前 pdfjs 版本，从 cdnjs 加载 workerpdfjs.GlobalWorkerOptions.workerSrc =`https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`// ========== 方式二：Vite 本地打包（适合离线场景） ==========// 需要 Vite 支持，把 worker 作为独立 chunk 打包// pdfjs.GlobalWorkerOptions.workerSrc = new URL(// 'pdfjs-dist/build/pdf.worker.min.mjs',// import.meta.url// ).toString()exportdefault pdfjs如果你的应用需要离线使用，或者不想依赖 CDN，可以用 Vite 的new URL()语法把 worker 打包进项目。代价是初始包体积会增加大约 1MB。
注意：pdf.js 的主库版本和 worker 版本必须一致，否则会报 "API version does not match Worker version" 的错误。用 ${pdfjs.version}自动拼接是最稳妥的做法。
Worker 配好之后，就可以开始提取文字了。整个流程是这样的：
pdf.js 给每一页返回一个TextItem数组，每个 item 有str（文字内容）、transform（位置和字号）等属性。我们只需要str，把它们拼起来就行。
// src/utils/extractPdfText.js// 逐页提取 PDF 中的文字内容import pdfjs from'./pdfConfig'/** * 从 PDF 文件中提取所有文字，按段落返回 * @param {File} file - PDF 文件对象 * @returns {Promise<string[]>} 段落数组 */exportasyncfunctionextractPdfText(file) {const arrayBuffer = await file.arrayBuffer()const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promiseconst paragraphs = []const totalPages = pdf.numPagesfor (let pageNum = 1; pageNum <= totalPages; pageNum++) {const page = await pdf.getPage(pageNum)const content = await page.getTextContent()// content.items 是一个 TextItem 数组// 每个 item 有 str（文字）、transform（位置/字号）等属性const pageText = content.items .filter((item) =>'str'in item && item.str.trim()) .map((item) => item.str) .join(' ')// 按空行分段，过滤掉纯空白段落const pageParagraphs = pageText .split(/\n{2,}/) .map((p) => p.trim()) .filter((p) => p.length > 0) paragraphs.push(...pageParagraphs) }return paragraphs}/** * 检测 PDF 是否为扫描件（几乎没有可提取文字） * @param {string[]} paragraphs - 提取到的段落 * @returns {boolean} true 表示可能是扫描件 */exportfunctionisScannedPdf(paragraphs) {const totalChars = paragraphs.reduce((sum, p) => sum + p.length, 0)// 总字符数少于 50 大概率是扫描件或纯图片 PDFreturn totalChars < 50}我理解下来，pdf.js 提取的是"文字流"，不是"排版"。它知道每个字是什么，但不知道这个字在页面的哪个位置、属于哪个段落。所以我们只能按空行粗略分段，复杂的多栏布局、表格嵌套基本都会乱。
文字拿到了，接下来就是把段落数组写成 .docx 文件。docx 库的 API 很直观——创建一个Document，里面放Paragraph，最后用Packer.toBlob()转成 Blob 下载。
// src/utils/generateDocx.js// 用 docx 库把段落数组生成 .docx 文件并下载import { Document, Paragraph, Packer } from'docx'/** * 将段落数组生成 Word 文档并触发下载 * @param {string[]} paragraphs - 文字段落 * @param {string} fileName - 下载文件名（不含扩展名） */exportasyncfunctiongenerateAndDownloadDocx(paragraphs, fileName = 'converted') {// 构建文档：每个段落对应一个 Paragraphconst doc = new Document({sections: [ {properties: {page: {margin: {top: 1440, // 1 英寸 = 1440 twips right: 1440,bottom: 1440,left: 1440, }, }, },children: paragraphs.map((text) =>new Paragraph({ text,spacing: {line: 360, // 1.5 倍行距（240 = 单倍，360 = 1.5倍） after: 200, // 段后间距 }, }) ), }, ], })// Packer.toBlob() 返回 Blob 对象const blob = await Packer.toBlob(doc)// 创建下载链接并触发点击const url = URL.createObjectURL(blob)const link = document.createElement('a') link.href = url link.download = `${fileName}.docx`document.body.appendChild(link) link.click()document.body.removeChild(link)// 释放内存 URL.revokeObjectURL(url)}这里有个小细节：docx 库的间距单位是twips（1/20 磅），1 英寸 = 1440 twips，1 倍行距 = 240。所以 1.5 倍行距就是 360，段后间距 200 大约是 10 磅。
上面的工具函数散落在各处不好维护，我把它们封装成了一个完整的PdfToWord.vue组件，支持点击上传、拖拽上传、文字预览、扫描件检测、一键转换下载。
<!-- src/components/PdfToWord.vue --><template><divclass="pdf-to-word"><!-- 上传区域 --><divclass="upload-area":class="{ 'is-dragover': isDragover }" @click="triggerFileInput" @dragover.prevent="isDragover = true" @dragleave="isDragover = false" @drop.prevent="handleDrop" ><inputref="fileInputRef"type="file"accept=".pdf"style="display: none" @change="handleFileChange" /><divv-if="!pdfFile"class="upload-placeholder"><divclass="upload-icon">📄</div><p>点击或拖拽 PDF 文件到此处</p><pclass="upload-tip">仅支持文字型 PDF，扫描件需 OCR</p></div><divv-elseclass="file-info"> {{ pdfFile.name }} {{ formatFileSize(pdfFile.size) }}</div></div><!-- 操作按钮 --><divclass="action-bar"><buttonclass="btn btn-preview":disabled="!pdfFile || isProcessing" @click="handlePreview" > {{ isProcessing ? '处理中...' : '预览文字' }}</button><buttonclass="btn btn-download":disabled="!pdfFile || isProcessing || isScanned" @click="handleConvert" > 转 Word 并下载</button></div><!-- 扫描件警告 --><divv-if="isScanned"class="warning-box"> ⚠️ 检测到该 PDF 几乎没有可提取文字，可能是扫描件或纯图片 PDF。 纯前端方案无法处理扫描件，建议使用 OCR 工具或后端转换服务。</div><!-- 预览区域 --><divv-if="previewText"class="preview-area"><h6class="preview-title">文字预览（前 10 段）</h6><divclass="preview-content"><pv-for="(p, i) in previewParagraphs":key="i">{{ p }}</p></div></div></div></template><scriptsetup>import { ref, computed } from'vue'import { extractPdfText, isScannedPdf } from'../utils/extractPdfText'import { generateAndDownloadDocx } from'../utils/generateDocx'const emit = defineEmits(['success', 'error'])const fileInputRef = ref(null)const pdfFile = ref(null)const isDragover = ref(false)const isProcessing = ref(false)const previewText = ref('')const allParagraphs = ref([])const isScanned = ref(false)// 预览只显示前 10 段const previewParagraphs = computed(() => allParagraphs.value.slice(0, 10))// 触发文件选择const triggerFileInput = () => { fileInputRef.value?.click()}// 文件选择const handleFileChange = (e) => {const file = e.target.files?.[0]if (file) setFile(file)}// 拖拽上传const handleDrop = (e) => { isDragover.value = falseconst file = e.dataTransfer.files?.[0]if (file && file.type === 'application/pdf') { setFile(file) }}const setFile = (file) => { pdfFile.value = file previewText.value = '' allParagraphs.value = [] isScanned.value = false}// 格式化文件大小const formatFileSize = (bytes) => {if (bytes < 1024) return bytes + ' B'if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'return (bytes / (1024 * 1024)).toFixed(2) + ' MB'}// 预览文字const handlePreview = async () => {if (!pdfFile.value) return isProcessing.value = truetry { allParagraphs.value = await extractPdfText(pdfFile.value) isScanned.value = isScannedPdf(allParagraphs.value) previewText.value = allParagraphs.value.slice(0, 10).join('\n') } catch (err) { emit('error', err) alert('PDF 解析失败：' + err.message) } finally { isProcessing.value = false }}// 转换并下载const handleConvert = async () => {if (!pdfFile.value) return isProcessing.value = truetry {// 如果还没提取过，先提取if (allParagraphs.value.length === 0) { allParagraphs.value = await extractPdfText(pdfFile.value) }const baseName = pdfFile.value.name.replace(/\.pdf$/i, '')await generateAndDownloadDocx(allParagraphs.value, baseName) emit('success', { fileName: baseName + '.docx' }) } catch (err) { emit('error', err) alert('转换失败：' + err.message) } finally { isProcessing.value = false }}</script><stylescoped>.pdf-to-word {max-width: 600px;margin: 0 auto;}.upload-area {border: 2px dashed #d9d9d9;border-radius: 8px;padding: 40px20px;text-align: center;cursor: pointer;transition: all 0.3s;background: #fafafa;}.upload-area:hover,.upload-area.is-dragover {border-color: #1890ff;background: #f0f9ff;}.upload-icon {font-size: 48px;margin-bottom: 12px;}.upload-placeholderp {margin: 4px0;color: #666;}.upload-tip {font-size: 12px;color: #999;}.file-info {display: flex;flex-direction: column;gap: 8px;}.file-name {font-weight: 600;color: #333;}.file-size {font-size: 13px;color: #999;}.action-bar {display: flex;gap: 12px;margin-top: 16px;}.btn {flex: 1;padding: 10px16px;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: opacity 0.2s;}.btn:disabled {opacity: 0.5;cursor: not-allowed;}.btn-preview {background: #e6f7ff;color: #1890ff;border: 1px solid #91d5ff;}.btn-download {background: #1890ff;color: #fff;}.warning-box {margin-top: 16px;padding: 12px16px;background: #fff7e6;border: 1px solid #ffd591;border-radius: 6px;color: #d46b08;font-size: 14px;line-height: 1.6;}.preview-area {margin-top: 20px;border: 1px solid #e8e8e8;border-radius: 8px;overflow: hidden;}.preview-title {margin: 0;padding: 12px16px;background: #fafafa;border-bottom: 1px solid #e8e8e8;font-size: 14px;color: #333;}.preview-content {padding: 16px;max-height: 400px;overflow-y: auto;}.preview-contentp {margin: 0012px0;font-size: 14px;line-height: 1.7;color: #555;}</style>使用的时候直接引入组件就行：
<template><PdfToWord @success="handleSuccess" /></template><scriptsetup>import PdfToWord from'./components/PdfToWord.vue'const handleSuccess = ({ fileName }) => {console.log('转换成功：', fileName)}</script>用户以为"PDF 转 Word"什么 PDF 都能转，但扫描件（图片型 PDF）里根本没有文字层，pdf.js 提取出来是空的。这个一定要在产品层面说清楚，或者加个检测提示——我在组件里加了isScannedPdf检测，总字符数少于 50 就提示用户。
PDF 是"最终展示格式"，每个字的坐标都是绝对定位；Word 是"流式排版格式"，文字会自动流动。这两种格式的底层模型完全不同，想在纯前端精确还原表格、多栏、图文混排，基本是不可能的。我们的方案只保留文字内容，格式需要用户在 Word 里自己调。
虽然 pdf.js 用了 Worker，但getTextContent的数据回传和段落处理还是在主线程。几百页的 PDF 可能会让页面短暂卡顿。如果需要处理大文件，可以加分页处理或者进度条提示。
前面提过了，主库和 worker 的版本号必须严格一致。我踩过一次坑——手动写死了版本号，后来升级 pdfjs 后忘了改 worker 地址，直接报错。用${pdfjs.version}自动拼接就不会有这个问题。
说实话，纯前端 PDF 转 Word 这个方案，只适合文字型 PDF 的内容提取。如果你的需求是格式精确还原、处理扫描件、或者转换复杂排版，还是老老实实用后端 LibreOffice 或者第三方 OCR 服务吧，没有捷径。
最后给个总结，方便你判断这个方案适不适合你的项目：
回头看看，这个方案的本质就是"把 PDF 里的字抠出来，重新排成 Word"。听起来简单，但真正落地的时候，Worker 配置、扫描件检测、大文件性能，每一个都能让你卡半天。希望这篇文章能帮你少走点弯路。
有问题评论区聊。
