我正在尝试使用 Vite 将我的 vue2 应用程序转换为 vue3。因为没有 webpack,所以我的 pdfjs 实现失败了。我能够渲染 pdf,但 renderTextLayer 无法正常工作(参见下图)。
这是浏览器中的消息:
警告:设置假工人。
警告:fetchStandardFontData:无法获取文件“FoxitSymbol.pfb” 带有“UnknownErrorException:StandardFontDataFactory 未初始化, 请参阅
参数。”。useWorkerFetch
警告:fetchStandardFontData:无法获取文件 “FoxitDingbats.pfb”与“UnknownErrorException: StandardFontDataFactory 未初始化,请参阅
参数。”。useWorkerFetch
我不太确定如何修复工人。我尝试将工作人员后缀添加到导入中,如here所示,但出现以下错误,它甚至不会渲染 pdf。
错误:设置假工作器失败:“无法将对象转换为原始值”。
不知道为什么 standardFontDataFactory 没有初始化。
<script>
const pdfjs = await import('pdfjs-dist/build/pdf');
const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
import { renderTextLayer, getDocument } from "pdfjs-dist";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
export default {
async mounted() {
let that=this
let loadingTask = getDocument(this.$store.getters.blobURL)
loadingTask.promise.then((pdf) => {
for (const pageNumber of [...Array(pdf.numPages).keys()]){
pdf.getPage(pageNumber+1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
var canvas = document.getElementById(`pdfPage${pageNumber+1}`);
var context = canvas.getContext('2d');
canvas.height = viewport.height
canvas.width = viewport.width
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
that.createTextLayer(page,canvas)
})
})
}
})
}
methods: {
createTextLayer(page,canvas){
page.getTextContent().then(content => {
let textLayerDiv=document.getElementById('textLayer'+page.pageNumber)
let rect = canvas.getBoundingClientRect()
textLayerDiv.style.top=`${rect.top}px`
let scale = rect.height / page.getViewport(1).height
let viewport = page.getViewport(scale)
renderTextLayer({
textContent: content,
container: textLayerDiv,
viewport,
textDivs:[]
})
})
},
}
}
</script>
我发现问题出在 CSS 范围内。由于该元素稍后渲染,因此未应用作用域 CSS。下面是导入的 css,需要位于无范围样式标签中。
@import '../../node_modules/pdfjs-dist/web/pdf_viewer.css';
也许可以,你能帮我回答一下吗