windows.open 在vue前端实现文件下载(自定义下载文件名)

1. 将要下载的文件放在前端项目的 assets 文件夹内

 我要下载的文件为  src/assrts/xxx/xxx模板.csv

 2. 在页面创建下载按钮   

3. 导入该文件

4. 在build文件夹下的webpack.base.conf.js 文件中,添加csv(或者其他)解析类型

5. 编写下载方法

参考自:vue 实现本地excel文件下载功能_璐哈路哈呦的博客-CSDN博客_vue下载excel

下载按钮的方法为downloadARJ,根据不同文件的文件格式主要就是修改两个地方:

  • 第一个是类型:这个根据你的文件格式去设置;      常用的类型见最后一张图
  • 第二个是修改你想自定义的名字。

 下载方法的代码

downloadARJ(){
        const bloc = this.dataURLtoBlob(ArjFileUrl)
        const blob = new Blob([bloc], {
          type: 'text/csv'
        })
        const downLoadEle = document.createElement('a')
        // 通过返回的二进制数据来创建一个对象URL.
        const href = URL.createObjectURL(blob)
        downLoadEle.href = href
        // 信息表为自定义文件名
        downLoadEle.download = 'ARJ模板文件'
        document.body.appendChild(downLoadEle)
        downLoadEle.click()
        document.body.removeChild(downLoadEle)
        // 当加载完成后释放对象URL.
        window.URL.revokeObjectURL(href)
        // window.open(fileurl, '_blank')
      },
     // 将文件对象先转换为了二进制,再调用
      dataURLtoBlob(dataurl) {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new Blob([u8arr], {
          type: mime
        })
       },

最后,各类型的type  

参考自Content-Type: application/vnd.ms-excel 操作文件_钤印球迷的博客-CSDN博客_application/vnd.ms-excel

'ppt'        => 'application/vnd.ms-powerpoint',
'dir'        => 'application/x-director',
'js'        => 'application/x-javascript',
'swf'        => 'application/x-shockwave-flash',
'xhtml'        => 'application/xhtml+xml',
'xht'        => 'application/xhtml+xml',
'zip'        => 'application/zip',
'mid'        => 'audio/midi',
'midi'        => 'audio/midi',
'mp3'        => 'audio/mpeg',
'rm'        => 'audio/x-pn-realaudio',
'rpm'        => 'audio/x-pn-realaudio-plugin',
'wav'        => 'audio/x-wav',
'bmp'        => 'image/bmp',
'gif'        => 'image/gif',
'jpeg'        => 'image/jpeg',
'jpg'        => 'image/jpeg',
'png'        => 'image/png',
'css'        => 'text/css',
'html'        => 'text/html',
'htm'        => 'text/html',
'txt'        => 'text/plain',
'xsl'        => 'text/xml',
'xml'        => 'text/xml',
'mpeg'        => 'video/mpeg',
'mpg'        => 'video/mpeg',
'avi'        => 'video/x-msvideo',
'movie'        => 'video/x-sgi-movie',  

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值