上海企业宣传片制作_重庆市住房和城乡建设人才促进网_2022十大网络营销案例_抖音关键词搜索指数

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等问题

参考大佬 平凡的人类 空白