前端接收到PDF文件流数据预览及浏览器兼容问题

Question

项目中有一个需求，接收到从后端返回的pdf文件流数据，然后将其展示到网页中，但是遇到了兼容性和文件保存的问题。

---

相关代码：

//预览pdf文件方法
pdfPreview:  function(blob,filename){
    if(!blob) return
    let url = window.URL.createObjectURL(new Blob([blob]));
    let html = "<embed width='100%' height='100%' name='plugin' id='plugin' type='application/pdf' src='" + url + "'>";
    let newwindow = window.open('','_blank','');
    newwindow.document.write(html);
}

//axios请求
axios({
    method: 'post',
    url: '/repPreview',
    data: {
        report_id: row.report_id
    },
    responseType: 'blob'
}).then(res => {
    if(res.status === 200){
        console.log("预览返回：");
        console.log(res);
        _this.pdfPreview(res.data,res.headers.filename);
    }else{
        _this.$notify({
            type:  'error',
            message:  "未知错误！"
        });
    }
}).catch(err => {console.log(err)});

---

接口返回：

谷歌浏览器效果：

但是此时Ctrl+S无法保存该pdf文件，点击浏览器中自带的下载按钮也无法下载

欧朋浏览器效果：

IE浏览器效果：

---

是否pdf文件流的预览方式不对？该如何解决？

Answer 1

参考pdf.js插件解决兼容问题

Answer 2

请问你解决了这个问题么