vue+ts+elementUI:后端返回文件流，前端预览pdf文件

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>