文件的预览与下载

文件的预览

这里文件的预览是pdf格式的,pdf格式的文件在浏览器中直接用window.open('', '_blank') 新标签页打开;
后端返回pdf文件的url的时候可以用这种方式预览,也是默认先预览的

    // 预览文件
    lookClick(type){
      let fileName = this.pageName + this.selDate + type + "报表.pdf";
      axios.get(`${this.downloadRUL}?fileName=${fileName}`).then(res => {
        if (res.data.success) {
                    window.open(res.data.result,'_blank')
        }else{
           // 提示失败信息或者打开默认文件
          ....
        }
      })
},

文件下载

后端返回文件的url是.pdf文件 直接打开就是预览,当然也可以下载(必须先预览);
如果返回的是.doc[x]的url,直接打开就是下载(因为浏览器不能在不借助插件的情况下打开.doc文件

  • 下载文件的两种方式
    1. url下载
    2. 文件流下载
  • 下面是文件流下载的方法
    // 下载文件
    downloadFun(type){
            return new Promise(resolve => {
                let fileName = this.pageName + this.selDate + type + "报表.pdf";
                axios({
                    url: `${this.viewRUL}?fileName=${fileName}`,
                    method: 'GET',
                    responseType: 'blob',
                }).then(res =>{
                    if (res.data) {
                        resolve(res.data)
                    }
                })
            })
            
        },
        // 下载文件
        downloadClick(type) {
            this.downloadFun(type).then(data => {
                let fileName = this.pageName + this.selDate + type + "报表.pdf";
                let blob = new Blob([data], {type: 'application/pdf;charset=UTF-8'});
                if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, fileName)
                } else {
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = fileName;
                    link.click();
                    window.URL.revokeObjectURL(link.href) //释放内存
                }
            })
            
        }

你可能感兴趣的:(文件的预览与下载)