文章目录
- 1.使用场景
- 2. 使用方式
- 1. npm 包下载,[点击查看](https://www.npmjs.com/package/pdfjs-dist)
- 2. 官网下载
- 1. 放到public文件夹下面
- 2. 官网下载地址[点我,进入官网](https://github.com/mozilla/pdf.js/tags?after=v3.3.122)
- 3. 代码演示
- 4. 图片预览
- 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. 代码演示
<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>4. 图片预览
5. 如果遇到跨域或者application/octet-stream等问题
参考大佬 平凡的人类 空白
