vue-pdf 预览和下载
极简模式:pdf 预览handelDownload(row) {this.$axios({method: "get",url: baseUrl + getUrl,responseType: "arraybuffer",header: { "Content-Type": "multipart/form-data" },params: {billId: row.id,...
·
极简模式:pdf 预览
handelDownload(row) {
this.$axios({
method: "get",
url: baseUrl + getUrl,
responseType: "arraybuffer",
header: { "Content-Type": "multipart/form-data" },
params: {
billId: row.id,
},
}).then((resp) => {
const binaryData = [];
binaryData.push(resp.data);
//获取blob链接
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));
window.open(this.pdfUrl);
});
},
下载模式:pdf 下载
handelDownload(row) {
request({
url: baseUrl + getUrl,
method: "put",
responseType: "blob",
header: { "Content-Type": "multipart/form-data" },
data: {
idList: this.ids,
},
})
.then((res) => {
const url = window.URL.createObjectURL(new Blob([res.data]));
const link = window.document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", "pdf" + ".zip");
document.body.appendChild(link);
link.click();
})
.catch((res) => {
});
},
文件流模式:
this.$axios({
method: "get",
url: baseUrl + getUrl,
responseType: "arraybuffer",
header: { "Content-Type": "multipart/form-data" },
params: {
billId: row.id,
},
}).then((resp) => {
const binaryData = [];
binaryData.push(resp.data);
//获取blob链接
this.pdfUrl = window.URL.createObjectURL(
new Blob(binaryData, { type: "application/pdf" })
);
this.keyValue = row.id;
this.flag = true;
});
<iframe :src="pdfUrl" page="0" frameborder="0" style="width: 100%; height: 100%"></iframe>
更多推荐



所有评论(0)