#vue实现pdf预览的功能(流的方式)
** 1.pdf我没下载包 npm i pdf 这个**
首先写一个iframe标签
<iframe
:src="pdfUrl"
frameBorder="no"
width="100%"
:loading="loading"
height="100%"
/>
import axios from "axios"; //引入axios
在data中声明
loading:false,
pdfUrl:''
调接口一定要注意 responsetype 是否生效了 要告诉浏览器是pdf文件
var that = this;
axios.request({
method: "POST",
url: '后台地址',
responseType: "blob", //这里最关键
})
.then((res) => {
const fileReader = new FileReader();
fileReader.onload = function () {
var fun = () => {
const blob = new Blob([res.data], { type: "application/pdf" }); //声明的形式
that.$nextTick(() => {
that.pdfUrl = URL.createObjectURL(blob);
});
};
fun();
};fileReader.readAsText(res.data);
})
.catch((error) => {
this.$message({
type: "error",
message: error,
});
})
.finally(() => {
this.loading = false;
});