文章目录
- 1.使用场景
- [2. 使用方式](#2. 使用方式)
-
- [1. npm 包下载,[点击查看](https://www.npmjs.com/package/pdfjs-dist)](#1. npm 包下载,点击查看)
- [2. 官网下载](#2. 官网下载)
-
- [1. 放到public文件夹下面](#1. 放到public文件夹下面)
- [2. 官网下载地址[点我,进入官网](https://github.com/mozilla/pdf.js/tags?after=v3.3.122)](#2. 官网下载地址点我,进入官网)
- [3. 代码演示](#3. 代码演示)
- [4. 图片预览](#4. 图片预览)
- [5. 如果遇到跨域或者application/octet-stream等问题](#5. 如果遇到跨域或者application/octet-stream等问题)
1.使用场景
pdf链接或者pdf文件流的预览
2. 使用方式
1. npm 包下载,点击查看
npm i pdfjs-dist // 此种方式,不过多介绍,网上都是
2. 官网下载
1. 放到public文件夹下面
2. 官网下载地址点我,进入官网
由于是github可能有些网络进不去,可以通过网盘下载
链接: https://pan.baidu.com/s/1cG06QTtWwTSTSzOPWy5NQg?pwd=rcnm 提取码: rcnm
3. 代码演示
js
<template>
<div class="pdf-preview">
<el-row>
<el-col :span="24">
<el-button @click="handleChooseLocalFile" type="primary">选择本地文件</el-button>
</el-col>
</el-row>
<iframe class="pdf-iframe" :src="previewURL" width="100%" height="800px" v-if="previewURL"></iframe>
</div>
</template>
<script>
export default {
name: "pdfPreview",
data() {
return {
// public 下面的路径
pdfJsViewer: "/pdfjs-4.8.69/web/viewer.html",
fileUrl: "/pdfjs-4.8.69/web/compressed.tracemonkey-pldi-09.pdf",
};
},
computed: {
previewURL() {
return this.fileUrl ? `${this.pdfJsViewer}?file=${encodeURIComponent(this.fileUrl)}` : "";
},
},
methods: {
handleChooseLocalFile() {
let input = document.createElement("input");
input.type = "file";
input.accept = ".pdf";
input.multiple = false;
input.onchange = (e) => {
let file = e.target.files[0];
if (file) {
this.fileUrl = URL.createObjectURL(file);
}
};
input.click();
input.remove();
},
},
};
</script>
<style scoped lang="scss">
.inner-tool {
display: flex;
flex-direction: column;
}
.pdf-preview {
flex: 1;
}
.pdf-iframe {
margin-top: 20px;
height: calc(100vh - 150px);
}
</style>