vue中使用pdf阅读器 --- pdf.js

一、下载

      https://mozilla.github.io/pdf.js/getting_started/#download 

     

二、导入

   

三、使用

<template>
  <div>
    <iframe :src="'/static/pdf/web/viewer2.html?file='+url" width="800px" height="500px"></iframe>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      url: "http://www.web.com/zjzz/Test/get_pdf_file"
      //此处的url可以为服务器端的pdf文件流，也可以是本地项目中的文件位置,
      //此处服务器端获取pdf会产生跨域问题需要解决
    };
  },
  created() {}
};
</script>
<style scoped>
</style>

四、解决服务器端获取跨域问题---viewer.js文件中的1903行

 

 

五、屏蔽插件中的部分功能

通过id找到button按钮的位置

<button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File"             
   tabindex="32"
   data-l10n-id="open_file" style="display: none;"><!-- 添加display: none; -->
        <span data-l10n-id="open_file_label">Open</span>
</button>

最后 在viewer.js中 屏蔽 openFile  按钮相关的js

参考：

https://blog.csdn.net/liuying93/article/details/83410405

https://blog.csdn.net/shentibeitaokong/article/details/80011900