pdf渲染

simply-none · Apr 17, 2022 · 0b00893 · 0b00893
1 parent d57f1c0
commit 0b00893
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 6 deletions.
diff --git a/usage-other/前端渲染pdf字体缺失问题.md b/usage-other/前端渲染pdf字体缺失问题.md
@@ -1,23 +1,29 @@
-# 前端渲染pdf字体缺失问题总结
+# 前端渲染pdf
 
 > 参考链接：https://www.i4k.xyz/article/m0_37903882/113320701
 
-## 前提概要
+## 字体缺失问题总结
+
+### 前提概要
 
 直接按照文档进行引入时，会发现有字体缺少的情况（pdfh5除外）
 
-使用的pdf插件介绍：
+使用的pdf插件渲染pdf：
 1. pdfvuer：修改cmapurl能获取后台填充的内容，以将pdf展示完整，渲染较快
 2. vue-pdf：修改cmapurl能获取后台填充的内容，以将pdf展示完整，渲染较快
 3. vue-pdf-embed：暂未发现修改cmapurl接口
 4. vue-pdf-app：暂未发现修改cmapurl接口
 5. pdfh5：能直接展示，但渲染慢
 
-## 用法
+直接使用html元素渲染pdf：
+  1. pdfjs部署，并用iframe嵌套，`<iframe src="http://127.0.0.1:5500/web/viewer.html?file=http://localhost:21212/%E7%AE%97%E6%B3%95%E5%AF%BC%E8%AE%BA%20(Thomas%20H.Cormen)%20(z-lib.org).pdf" width="100%" height="1000px"></iframe>`
+  2. 直接使用embed：`<embed src="http://localhost:21212/%E7%AE%97%E6%B3%95%E5%AF%BC%E8%AE%BA%20(Thomas%20H.Cormen)%20(z-lib.org).pdf" type="application/pdf" width="100%" height="1000px">`
+
+#### 用法
 
 > vue-pdf-embed、vue-pdf-app、pdfh5的使用请见官方文档
 
-### pdfvuer、vue-pdf
+##### pdfvuer、vue-pdf
 
 > 注意事项：vue-pdf可能会出现控制台警告，或许应当将vue-cli对应的版本从v5->v4，以及webpack也降级成v4
 > 目前使用：pdfvuer
@@ -56,4 +62,3 @@ computed: {
 
 1，对于pdfvuer，当修改url时，组件不会切换成对应的pdf，解决方案是：对pdf组件加上`:key="pdfChangeFlag"`，当切换url时，修改key，让组件重新渲染
 2，对于vue-pdf，第一次加载时，渲染不出模板填充的数据，之后能够渲染
-
diff --git a/usage-tool/pdfjs本地部署.md b/usage-tool/pdfjs本地部署.md
@@ -0,0 +1,86 @@
+# pdfjs本地部署
+
+> 官方文档：`https://github.com/mozilla/pdf.js`
+
+# 使用
+
+```html
+<!-- http://127.0.0.1:5500/web/viewer.html：表示部署的pdf路径 -->
+<!-- http://localhost:21212/%E7%AE%97%E6%B3%95%E5%AF%BC%E8%AE%BA%20(Thomas%20H.Cormen)%20(z-lib.org).pdf：表示需要查看的pdf文件地址 -->
+<iframe src="http://127.0.0.1:5500/web/viewer.html?file=http://localhost:21212/%E7%AE%97%E6%B3%95%E5%AF%BC%E8%AE%BA%20(Thomas%20H.Cormen)%20(z-lib.org).pdf" width="100%" height="1000px"></iframe>
+```
+
+
+
+## 简易部署方案
+
+```bash
+# 下载项目
+$ git clone https://github.com/mozilla/pdf.js.git
+$ cd pdf.js
+
+# 安装构建包gulp
+$ npm install -g gulp-cli
+
+# 安装依赖
+$ npm install
+
+# 启动项目
+$ gulp server
+
+# 构建项目，运行到服务器
+$ gulp generic
+# 构建项目，运行到服务器（支持旧的浏览器）
+$ gulp generic-legacy
+```
+
+## 自定义部署
+
+1. 端口号自定义
+
+```js
+// 在gulpfile.js中
+function createServer() {
+  console.log();
+  console.log("### Starting local server");
+
+  const WebServer = require("./test/webserver.js").WebServer;
+  const server = new WebServer();
+  // 自定义端口号
+  server.port = 9856;
+  server.start();
+}
+```
+
+## 报错
+
+报错1：`Uncaught (in promise) Error: file origin does not match viewer's`
+
+解决：注释`web/app.js`中判断远程地址的代码
+```js
+try {
+    const viewerOrigin = new URL(window.location.href).origin || "null";
+    if (HOSTED_VIEWER_ORIGINS.includes(viewerOrigin)) {
+      // Hosted or local viewer, allow for any file locations
+      return;
+    }
+    const fileOrigin = new URL(file, window.location.href).origin;
+    // Removing of the following line will not guarantee that the viewer will
+    // start accepting URLs from foreign origin -- CORS headers on the remote
+    // server must be properly configured.
+    // 注释下面这三行
+    // if (fileOrigin !== viewerOrigin) {
+    //   throw new Error("file origin does not match viewer's");
+    // }
+  } catch (ex) {
+    PDFViewerApplication.l10n.get("loading_error").then(msg => {
+      PDFViewerApplication._documentError(msg, { message: ex?.message });
+    });
+    throw ex;
+  }
+};
+```
+
+报错2：`/MyApp/Scripts/pdfjs-dist/web/locale/locale.properties Failed to load resource: the server responded with a status of 404 (Not Found)`
+
+解决：因为文件缺少，需要生成对应的文件，运行命令`gulp locale`