node_modules/pdfjs-dist/build/pdf.mjs提示错误
<template>
<div>
<iframe id="iframe1" ref="iframe1"></iframe>
<iframe id="iframe2" ref="iframe2"></iframe>
<iframe id="compare" ref="compare"></iframe>
</div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist'
export default {
mounted() {
this.loadPdfFiles()
},
methods: {
loadPdfFiles() {
this.loadPdf(this.$refs.iframe1, 'file1.pdf')
this.loadPdf(this.$refs.iframe2, 'file2.pdf')
},
loadPdf(iframe, url) {
pdfjsLib.getDocument(url).promise.then((pdf) => {
const pages = []
for (let i = 1; i <= pdf.numPages; i++) {
pdf.getPage(i).then((page) => {
const canvas = document.createElement('canvas')
const viewport = page.getViewport({ scale: 1.0 })
canvas.height = viewport.height
canvas.width = viewport.width
const context = canvas.getContext('2d')
const renderContext = {
canvasContext: context,
viewport: viewport
}
page.render(renderContext).promise.then(() => {
pages.push(canvas.toDataURL())
if (pages.length == pdf.numPages) {
iframe.onload = () => {
this.addAnnotations(iframe)
}
this.loadIframe(iframe, pages)
}
})
})
}
})
},
loadIframe(iframe, pages) {
const html = `
<html>
<head>
<style>canvas { display: block; }</style>
</head>
<body>${pages.map((page) => `<img src="${page}">`).join(' ')}</body>
</html>
`
const doc = iframe.contentDocument || iframe.contentWindow.document
doc.open()
doc.write(html)
doc.close()
},
addAnnotations(iframe) {
const doc = iframe.contentDocument || iframe.contentWindow.document
const canvas = doc.createElement('canvas')
canvas.setAttribute('id', 'annotationCanvas')
canvas.setAttribute('style', 'position:absolute; top:0; left:0;')
canvas.height = iframe.height
canvas.width = iframe.width
doc.body.appendChild(canvas)
canvas.addEventListener('mousedown', (evt) => {
// TODO: Add annotation logic here
})
},
compareFiles() {
const doc1 = this.$refs.iframe1.contentDocument || this.$refs.iframe1.contentWindow.document
const doc2 = this.$refs.iframe2.contentDocument || this.$refs.iframe2.contentWindow.document
// TODO: Use pdf.js to compare the two PDF files
const result = { /* Comparison result */ }
this.showComparisonResult(result)
},
showComparisonResult(result) {
const doc = this.$refs.compare.contentDocument || this.$refs.compare.contentWindow.document
const canvas = doc.createElement('canvas')
canvas.setAttribute('id', 'resultCanvas')
canvas.setAttribute('style', 'position:absolute; top:0; left:0;')
canvas.height = this.$refs.iframe1.height
canvas.width = this.$refs.iframe1.width
doc.body.appendChild(canvas)
const ctx = canvas.getContext('2d')
// TODO: Use the result to highlight the differences
}
}
}
</script>
运行提示错误内容：
error in ./node_modules/pdfjs-dist/build/pdf.mjs
Module parse failed: Unexpected character '#' (183:31)
You may need an appropriate loader to handle this file type.
| }
| }
> class AnnotationElement {#
| hasBorder = false;
| constructor(parameters, {
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/pingcha/anjian/qianruform.vue?vue&type=script&lang=js& 8:40-61
@ ./src/views/pingcha/anjian/qianruform.vue?vue&type=script&lang=js&
@ ./src/views/pingcha/anjian/qianruform.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.64.136:3000/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
