Vue.js使用vue-pdf加载PDF出现空白页及getHexString警告问题

问题详情 #

在生产服务器上使用vue-pdf预览在线PDF时，页面显示空白，控制台无报错，仅出现以下警告：

pdf.worker.js?069e:1869 Warning: getHexString - ignoring invalid character: 109
2pdf.worker.js?069e:1869 Warning: getHexString - ignoring invalid character: 108
pdf.worker.js?069e:1869 Warning: getHexString - ignoring additional invalid characters.
pdf.worker.js?069e:1869 Warning: getHexString - ignoring invalid character: 104
pdf.worker.js?069e:1869 Warning: Indexing all PDF objects

已按步骤完成vue-pdf的npm安装，代码如下：

<template>
    <div>
        <pdf src="./assets/Manual.pdf"></pdf>
    </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    components: {
        pdf,
    },
    data() {
        return {}
    },
}
</script>

问题截图：

解决方法 #

1. 排查PDF文件有效性 #

getHexString警告指向PDF文件可能存在编码错误或损坏。先在本地用PDF阅读器打开Manual.pdf，确认文件能否正常显示。若文件损坏，替换为完整无错的PDF文件。

2. 修正资源路径 #

生产环境中相对路径可能无法被正确解析，尝试两种方式：

• 将PDF移至public目录，使用绝对路径：

  <pdf src="/Manual.pdf"></pdf>
  

• 用require引入资源：

  <pdf :src="require('./assets/Manual.pdf')"></pdf>
  

3. 手动指定worker路径 #

vue-pdf依赖的worker文件在生产环境可能加载异常，手动配置：

import pdf from 'vue-pdf'
import pdfWorker from 'pdfjs-dist/build/pdf.worker.entry'

pdf.GlobalWorkerOptions.workerSrc = pdfWorker

4. 更新依赖库 #

旧版本的vue-pdf或pdfjs-dist可能存在兼容性问题，执行更新命令：

npm update vue-pdf pdfjs-dist

内容的提问来源于stack exchange，提问作者JS24