vue编写web端在线预览文档

前文现在的需求是有文档但是不想写成下载到本地才能看想要直接点击预览就能看。文档要求为PDF格式。1.将PDF格式的文档放在public中的pdf文件夹中如截图所示2.根据行数据组装本地 PDF 地址2.1表格内容为tableData: [ { apiService: 摄像头管理, description: 摄像头管理接口文档, version: 1.0, fileName: 摄像头管理接口文档 }, { apiService: 数据采集任务管理 API 文档, description: 数据采集任务管理 API 文档, version: 1.0, fileName: 数据采集任务管理 API 文档 }, ]2.2 根据行数据组装本地 PDF 地址约定所有 PDF 文档统一放在 envi-web/public/pdf/ 目录下文件名使用 tableData 里的 fileName 字段后缀为 .pdf_buildPdfUrl(row) { if (!row || !row.fileName) return // 优先从 base href 取部署路径兼容 nginx 二级目录部署 // 回退顺序__webpack_public_path__ → process.env.BASE_URL → 根路径 / let baseUrl / try { const baseEl document.querySelector(base) if (baseEl baseEl.getAttribute(href)) { baseUrl baseEl.getAttribute(href) } else if (window.__webpack_public_path__) { baseUrl window.__webpack_public_path__ } else if (process process.env process.env.BASE_URL) { baseUrl process.env.BASE_URL } } catch (e) { /* ignore */ } if (!baseUrl) baseUrl / const folder baseUrl.endsWith(/) ? baseUrl pdf/ : baseUrl /pdf/ // 文件名编码中文空格、括号等特殊字符友好 const encoded encodeURIComponent(String(row.fileName).trim()) .pdf return folder encoded },3.拼接绝对地址便于 console / 提示使用非必须只是为了打印而已可忽略_toAbsolute(relative) { try { return new URL(relative, window.location.origin).toString() } catch (e) { return window.location.origin (relative.startsWith(/) ? relative : / relative) } },4.触发代码在表格中写一个预览按钮点击预览直接新窗口打开 PDF调用浏览器原生阅读器handlePreview(row) { const url this._buildPdfUrl(row) if (!url) { this.$message.warning(未配置对应的 PDF 文件名) return } const absUrl this._toAbsolute(url) console.info([apiDoc] 正在打开 PDF, absUrl) const win window.open(url, _blank, noopener,noreferrer) if (!win) { this.$message({ message: 浏览器拦截了弹窗请允许本网站弹出窗口后重试。\n或直接访问 absUrl, type: warning, duration: 6000, showClose: true }) } }