PDF如果用自己电脑的检视器开启，有些可以编辑的栏位就可以直接输入。想问如果用vue3显示PDF，是否有办法做到和在电脑上用检视器一样，直接编辑输入那些栏位，然后把这份编辑过的PDF传给后端?

目前找了一段时间，还没找到解法。

4 个回答

  • 旧至新
  • 新至旧
  • 最高Like数

2

copemoe

iT邦好手 2 级 ‧ 2024-12-05 09:22:04

可以参考此篇实作
用VUE3做个PDF动态合同表单（含编辑+渲染）
https://juejin.cn/post/7379995743883624485

1

浅水员

iT邦大师 6 级 ‧ 2024-12-05 14:51:17

我不知道有没有 vue3 可以直接套用的
昨天看到这问题后尝试了一下
有找到在浏览器编辑后把资料送到后端的方法

（以下只是研究「做不做得到」的过程，所以直接改 build 好的东西，如果要用自己再进一步看相关文件吧）

我用的是 PDF.js
这是 FireFox 开启 pdf 使用的程式码
我在那网站下载 Prebuilt (modern browsers) 版本：
https://github.com/mozilla/pdf.js/releases/download/v4.9.124/pdfjs-4.9.124-dist.zip

解压缩放到伺服器环境后，他的 web/viewer.html 可以直接打开
会显示一个示範的 pdf

接着我去修改 web/viewer.mjs 的程式码
在 4364 行是一个 download 方法
里面的 if(data) 内容我改成这样

if (data) {
    let file = new File([data], filename, {type: \'application/pdf\'});
    let formData = new FormData();
    formData.append(\'file2save\', file);
    fetch(\'save-pdf.php\', {
        method: \'post\',
        body: formData
    }).then(r => r.text())
    .then(text => console.log(text));
}

如此一来，当使用者按下储存档案按钮，就会把修改后的 pdf 资料送到后端
而上述方法，只要 FireFox 本身能修改 pdf 的功能，应该都有支援

0

YC

iT邦好手 1 级 ‧ 2024-12-05 17:36:04

pdfme这个 react UI 可能接近你的需求。
他有提供网页编辑器
他提供一个 template，当 User 改完后，你直接把 JSON 数值回传 server。
下载的话，是用刚刚的 template + JSON 数值重新 render 一个 pdf。

0

smfself

iT邦新手 5 级 ‧ 2024-12-08 13:54:40

我目前开发过的专案有用 vue3 (vite 建置) 搭配 pdfjs(pdfjs-dist) 来针对前端呈现 PDF 档案，然后再根据前端 vue UI(HTML/JS/CSS) 的方式来处理 呈现+编辑功能(非编辑实际 PDF 档案) ，之后再透过 回传编辑资料的 json (资料+位置),在后端(java Spring 后台)用另外可处理 PDF 档案的元件将这些重新写入到PDF档案中!

就我所知 前端目前 pdfjs(pdfjs-dist)以检视功能为主，透过 canvas / img 的方式一页一页呈现指定的 PDF 内容，至于目前官网比较新的版本提供的 editor 功能看起来也不是在前端直接编辑 PDF 档案(若有错误请更正)!

此外我没用过 pdf-lib.js ，但查询了一下根据这篇的说明 "PDF处理库"NPM套件对比 https://npm-compare.com/zh-TW/pdf-lib,pdf-parse,pdfjs-dist

看起来是可以在前端(Browser) 中编修 PDF 档案，可能需要尝试才会知道如何使用!
不过我会认为[前端直接回传 PDF] 的资安风险(恶意PDF上传) ，比仅透过 [传回资料并由后端再编辑处理PDF 后产生] 来的高，这个可能需要谨慎考虑!


  • 2

浅水员

iT邦大师 6 级 ‧
2024-12-08 23:54:20

pdfjs-dist（也就是 PDF.js）是直接编辑 PDF 喔
虽然只有简单的功能
像是加文字在某些地方、画线或萤光笔
也可以填写 PDF 表单

修改

smfself

iT邦新手 5 级 ‧
2024-12-09 12:30:07

是的，我又查了一下官方範例，官方展示: https://mozilla.github.io/pdf.js/web/viewer.html
看起来是可以编辑后存档,不回传server ，而是直接用 js 把异动档案转为 download 方式存档, 这个方式就不会有上传 PDF的资安问题!
相关资料: viewer.html : https://github.com/mozilla/pdf.js/blob/master/web/viewer.html
pdf.js/web/app.js : https://github.com/mozilla/pdf.js/blob/master/web/app.js#L1109
**pdf.js/src/display/api.js : ** https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L2966

修改