提交 174f47d4 authored 作者: 张伊明's avatar 张伊明

合并分支 'zz-dev' 到 'pre'

feat:解决线下能显示pdf而线上不能的问题 查看合并请求 !235
流水线 #78 已通过 于阶段
in 15 分 37 秒
差异被折叠。
......@@ -36,7 +36,7 @@
"json5": "^2.2.3",
"lodash": "^4.17.21",
"markdown-it": "^14.1.0",
"pdfjs-dist": "^5.5.207",
"pdfjs-dist": "^3.11.174",
"pinia": "^3.0.4",
"vue": "^3.4.0",
"vue-router": "^4.2.5"
......
......@@ -11,15 +11,13 @@
</template>
<script>
import { ref, shallowRef, onMounted, nextTick, watch } from 'vue';
import * as pdfjsLib from 'pdfjs-dist';
import { TextLayer } from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url
).href;
import { ref, shallowRef, nextTick, watch } from 'vue';
// 使用 legacy 入口,避免线上对 .mjs 的 MIME 配置导致 worker 动态 import 失败
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
import pdfWorkerUrl from 'pdfjs-dist/legacy/build/pdf.worker.min?url';
// 通过 Vite 的 ?url 产出静态资源地址,确保线上/线下都能正确加载 worker
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorkerUrl;
export default {
name: 'PdfViewer',
props: {
......@@ -50,6 +48,8 @@ export default {
const searchKey = ref('');
const matchList = ref([]);
const matchIdx = ref(0);
// pdfjs 3.x 的 renderTextLayer 在不同入口下导出不一致,这里做一次缓存 + 兜底加载
const pdfjsApiRef = shallowRef(pdfjsLib);
// 保存 canvas
const setCanvasRef = (page, el) => {
......@@ -115,15 +115,30 @@ export default {
await pdfPage.render({ canvasContext: context, viewport }).promise;
// 渲染 textLayer:pdfjs-dist v5 推荐用 TextLayer,renderTextLayer 可能不存在
// 渲染 textLayer(pdfjs-dist 3.x):使用 renderTextLayer(不要用 TextLayer 构造器)
try {
const textContent = await pdfPage.getTextContent();
const layer = new TextLayer({
textContentSource: textContent,
let api = pdfjsApiRef.value || pdfjsLib;
let rt = api?.renderTextLayer;
// 兜底:某些入口下 renderTextLayer 不在 pdfjsLib 上,尝试 legacy 入口
if (typeof rt !== 'function') {
try {
const legacy = await import('pdfjs-dist/legacy/build/pdf');
pdfjsApiRef.value = legacy;
api = legacy;
rt = legacy?.renderTextLayer;
} catch (_) { }
}
if (typeof rt === 'function') {
await rt({
textContent,
container: textLayer,
viewport
});
await layer.render();
viewport,
// pdfjs 3.x 需要传入 textDivs 数组
textDivs: [],
enhanceTextSelection: false
}).promise;
}
} catch (e) {
console.warn('textLayer 渲染失败', e);
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论