vue下载pdf

下载pdf的接口是后端写的,前端只需要调用接口即可

showTip: false,
files: [],

1.点击下载,生成列表

        clickExport() { //点击下载
            let obj = {
               ...
            }
            exportMaintainRecords(obj)
            .then(res => {
                this.$message({type: 'success',message: "维修维保pdf导出任务创建成功"});
                this.getFileList();  //获取生成的列表
            })
            .catch(err => {
                this.$message.error(_.get(res,'data.msg',null))
            })


        },

2.点击铃铛,显示已经生成的列表

        clickTrumpet() { //点击铃铛
            this.showFiles = !this.showFiles;
            this.getFileList();
        },

         //查询记录
        getFileList() {
            this.files.length = 0;
            let params = {
               ...
            };
            findDownloadLogs(params)
            .then((res) => {
                if (res.status == 200 && res.data.code === 0) {
                    this.files = [...res.data.data];
                    this.showTip = this.judgeShowTip(this.files);
                }else{
                   this.$message.error(_.get(res,'data.msg',null))
                }
            })
            
        },

3.点击列表里的任务

        downFile(item){  //点击铃铛里的任务
            this.readyDownFile(item.pdfName,item.ossUrl)
            this.getUpdateExportRecordStatus(item.id)
            this.getFileList();
        },

        readyDownFile(pdfName,url) {
            var x = new XMLHttpRequest()
            var pdfName = pdfName
            x.open("GET", url, true);
            x.responseType = 'blob';
            x.onload = function (e) {
                var blob = x.response;
                if ('msSaveOrOpenBlob' in navigator) {//IE导出
                window.navigator.msSaveOrOpenBlob(blob, fileName);
                }
                else {
                var app = document.createElement('a');
                app.download = pdfName;
                app.href = URL.createObjectURL(blob);
                document.body.appendChild(app);
                app.click();
                document.body.removeChild(app);
                }
            };
            x.send();
        },

        getUpdateExportRecordStatus(ids) {  //更新状态
            updateExportRecordStatus({id:ids})
            .then(res=>{
                this.getFileList();   //获取生成的列表
            })
            .catch(err=>{
                
            })
        },

        judgeShowTip(list) {
            let flag = false
            if(list.length >0) {
                flag = list.some((item)=>{
                return item.fileStatus === '1'
                })
            }
            return flag
        },