vue2.x 使用pdf.js预览pdf文件

1.下载pdf.js资源包

下载地址：http://mozilla.github.io/pdf.js/getting_started/#download

2.解压资源包放到根目录\public\static\pdf，没有static的需要手动创建，这个结构是固定的，不然用不了，会报错

Uncaught SyntaxError: Unexpected token '<'

文件目录如下：

3.预览代码，path是文件路径，如果是文件流可以转成blob本地地址

<iframe id="pdfContainer" :src="`/static/pdf/web/viewer.html?file=${path}`" width="100%" height="100%" frameborder="0" />

//文件流转blob地址
const blob = new window.Blob([res], {
      type: 'application/pdf;charset-UTF-8'
})
this.path = URL.createObjectURL(blob)

最终得到

 

相关用法

1.去除下载，打印按钮，或者其他东西

        1.找到\public\static\pdf\web文件夹下面的viewer.html

        2.下载按钮（id="download"），打印按钮（ id="print"），大约在270行，给这两个button添加 style="visibility:hidden"就可以把下载，打印按钮去除，其他按钮功能同样

2.修改语言

pdf.js默认是跟随浏览器的语言，如果\public\static\pdf\web\locale文件下面没有对应的语言包就会默认使用’en-US‘。

如果不需要跟随浏览器语言，那就找到\public\static\pdf\web\viewer.js,865行，改为

defaultOptions.locale = {
    value: "你想要的语言代号（看locale文件）",
    kind: OptionKind.VIEWER
};