pdf预览
一 、本地文件预览
直接把pdf文件放在public下,
<a :href="item.url" target="_blank" ></a>
传入的url名字直接'/pdf名字.pdf'即可
二、后端通过接口返回的文件流形式
(个人不专业理解:以字节的形式传输,需要编译一下才可以直接显示 就好像水流一样把一个大的文件分成一段一段的流过去就叫文件流)
具体步骤:
1)导入pdf插件 官网
http://mozilla.github.io/pdf.js/getting_started/#download
放在static文件目录下,
示例
2)使用时用 el-dialog嵌套iframe使用
<el-dialog v-model="dialogVisible" destroy-on-close title="预览" width="1000px" @close="closeDialog()" append-to-body="true" > <iframe :src="pdfUrl" frameborder="0" style="width: 100%" height="500px" ></iframe> </el-dialog>
const pdfUrl = ref('') const dialogVisible = ref(false) const openDialog = (id: string) => { dialogVisible.value = true let url = BASE_URL + '/platservice/fileupload/download?' + `ids=${id}`//url即为后台传过来的文件流接口 pdfUrl.value = './static/pdf/web/viewer.html?file=' + encodeURIComponent(url) //对字符串进行编码 } const closeDialog = () => { dialogVisible.value = false }
调用openDialog 即可,传入参数id