vue+ts+elementUI:后端返回文件流,前端预览pdf文件
1.配置接口
//获取pdf文件流
export const getPdfService = (paramsData: any) => {
const res: any = service.post('/idsapi/api/dispatch/dispatch_file_stream',paramsData, {responseType: 'blob'});
return res;
}
2.ts方法
async previewPdf(fileName) { //预览pdf
let parm = {
FILE_NAME: ""
}
if (fileName != null && fileName != "") {
parm.FILE_NAME = fileName;
}
const responseData = (await getPdfService(parm)).data;
if (responseData != null) {
let pdfUrl = window.URL.createObjectURL(new Blob([responseData], { type: "application/pdf" }));
window.open(pdfUrl)
}
}
3.html调用方法
<el-table-column prop label="文件名称" width="420">
<template slot-scope="scope">
<a
style="color :#2ca0f2 ; text-decoration:underline"
@click="previewPdf(scope.row.FILENAME)"
>{{ scope.row.FILENAME}}</a>
</template>
</el-table-column>