vue编写web端在线预览文档

前文：现在的需求是有文档，但是不想写成下载到本地才能看，想要直接点击预览就能看。

文档要求为PDF格式。

1.将PDF格式的文档放在public中的pdf文件夹中，如截图所示

2.根据行数据组装本地 PDF 地址

2.1表格内容为：

javascript 复制代码

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

javascript 复制代码

 _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 / 提示使用）（非必须，只是为了打印而已，可忽略）

javascript 复制代码

 _toAbsolute(relative) {
            try {
                return new URL(relative, window.location.origin).toString()
            } catch (e) {
                return window.location.origin + (relative.startsWith('/') ? relative : '/' + relative)
            }
        },

4.触发代码，在表格中写一个预览按钮，点击预览：直接新窗口打开 PDF（调用浏览器原生阅读器）

javascript 复制代码

 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
                })
            }
        }