Vue在线预览PDF（不需要安装插件）

<template>
<div class="app">
<el-button @click="preview1">预览在线PDF</el-button>
<el-button @click="preview2">请求后端预览</el-button>
<el-dialog
v-if="previewShow"
title="预览"
:visible.sync="previewShow"
append-to-body
width="90%"
>
<!-- PDF显示的地方 -->
<iframe ref="pdf" :src="previewUrl" width="100%"></iframe>

<span slot="footer" class="dialog-footer">
<el-button type="primary" plain @click="previewShow = false"
>关 闭</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
previewShow: false,
previewUrl: "",
};
},
methods: {
// 直接传入一个地址
preview1() {
this.previewShow = true;
this.previewUrl = "https://www.gjtool.cn/pdfh5/git.pdf";
this.$nextTick(() => {
this.$refs.pdf.height = document.documentElement.clientHeight;
});
},
// 后端返回二进制流
preview2() {
this.previewShow = true;
axios
.get("你们后端的地址（下载地址）", {
responseType: "blob",
})
.then((res) => {
// 对后端返回二进制流做处理
this.previewUrl = window.URL.createObjectURL(
new Blob([res], { type: "application/pdf" })
);
// 重新设置大小
this.$nextTick(() => {
this.$refs.pdf.height = document.documentElement.clientHeight;
});
});
},
},
};
</script>
<style scoped>
</style>