页面有个要预览pdf的需求,数据是从后台传递过来的数据流:
1.安装插件:
npm install vue-pdf
2. 在页面引用:
import pdf from 'vue-pdf'
...
components: {pdf},
3. html中添加:
<pdf :src="pdfUrl"></pdf>
4.通过接口获取数据:
downloadFile({ id: this.id }).then((res) => {
if (
(!res && res.status != 200) ||
(res.data &&
res.data.type == "application/json")
) {
this.$message.error("找不到该文件");
return;
}
var binaryData = [];
binaryData.push(res.data);
// 记得一定要设置application的类型
let url = window.URL.createObjectURL(
new Blob(binaryData, {
type: "application/pdf;charset=utf-8",
})
);
if (url) {
this.pdfUrl = pdf.createLoadingTask(url);
}
});