一、下载
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