In addition to various pits, the most fatal point is that there is a Bug in its NPM package. After viewing it for the first time, the page will be blank and Error will be reported when viewing it again. Failed to execute ‘postMessage’ on ‘Worker’: ArrayBuffer at index 0 is already detached, ArrayBuffer at index 0 is already detached, ArrayBuffer at index 0 is already detached,

Cause analysis of fatal pit: CMapReaderFactory was introduced to dynamically import PDF language files to solve the problem of Chinese display, but when loading the PDF the second time the page is blank, when you load the PDF the first time, The return value of BCmap is the array object of Uint8Array[43366], while the second preview of PDF loading found the return value of BCmap is the empty array of Uint8Array[], because of the cache problem, The CMapReaderFactory code should add a line to the loadModules cache of the language file from which the PDF file was first loaded. delete require.cache[require.resolve(‘./buffer-loader!pdfjs-dist-sign/cmaps/’+query.name+’.bcmap’)]; Vue-pdf-signature this package, which is a new package that has been changed and published to NPM, can be used directly in the project.

For better compatibility and compatibility, the original vuE-PDF plug-in is replaced with vue-PDF-signature, and the installation and use are as follows:

1. Install dependencies

npm install --save vue-pdf-signature
Copy the code
  1. Page using
<pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" frameborder="0"></pdf> import pdf from 'vue-pdf-signature' / / Chinese PDF loading blank introduced rely on the import CMapReaderFactory from 'vue - PDF - signature/SRC/CMapReaderFactory js' data () {return {numPages: 1, pdfSrc: '' } }, this.$on('show', (url) => { // 1. Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided. This.pdfsrc = pdf.createloadingTask ({url: url, CMapReaderFactory}) // 3 Pdf.createloadingtask (URL).promise.then(PDF => {this.numPages = pdf.numPages})})Copy the code

CMapReaderFactory file to check the address: node_modules/vue – PDF – signature/SRC/CMapReaderFactory js vue – PDF – signature package changes, correct code:

New code: The rest is unchanged

delete require.cache[require.resolve('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap')];
Copy the code

After the project runs, an error is reported:

Because the core-JS version is not compatible, continue to install the package: CNPM install core-js@2, to perfect the solution

The original reference: the original link: blog.csdn.net/chenzhiyong…