0
点赞
收藏
分享

微信扫一扫

vue/cli3.0中使用pdf.js的案例教程pdf.js下载


​​pdf.js​​​​下载​​

vue/cli3.0中使用pdf.js的案例教程pdf.js下载_vue


浏览器中直接打开预览 pdf 文件


安装


解压下载的zip文件,将解压后的整个目录(pdf-dist)拷贝到项目的 public 目录下(放在 public 目录下的文件不会被 webpack 处理)


vue/cli3.0中使用pdf.js的案例教程pdf.js下载_vue_02


使用 pdf.js 自带的预览界面 viewer.html 预览,可以在 viewer.css 文件对 viewer.html 做一些样式调整。

在需要使用的地方直接一个 a 标签 href 链接即可,a 标签的 href 链接形式为:​​/​​​pdf-dist​​/web/viewer.html?file=pdf文件地址​


<a href="/pdf-dist/web/viewer.html?file=http://0.0.0.0:8000/file/demo.pdf">
预览文件
</a>


在浏览器中打开文件后如果报错 ​​file origin does not match viewer's​​​ ,只需要在 viewer.js 文件中找到 ​​throw new Error('file origin does not match viewer\'s');​​ 这一行,并注释掉即可


vue/cli3.0中使用pdf.js的案例教程pdf.js下载_html_03


通过 vue 路由组件实现预览


在项目 views 文件夹下新建一个组件用于 pdf 文件预览,比如我这里的 views/pdf-preview/index.vue


index.vue 文件内容如下,主要是通过 iframe 实现

<template>
<div class="box">
<a href="/">返回首页</a>
<iframe :src="$route.query.url" class="iframe"></iframe>
</div>
</template>

<script>
export default {
mounted() {
this.$router.push({
path: "download",
query: {
url:
"/pdf-dist/web/viewer.html?file=/xf.pdf"
}
});
}
};
</script>

<style scoped>
.iframe {
width: 100%;
height: 100vh;
border: 0;
overflow: hidden;
box-sizing: border-box;
}
</style>

vue/cli3.0中使用pdf.js的案例教程pdf.js下载_vue_04






举报

相关推荐

0 条评论