windows.open 在vue前端实现文件下载（自定义下载文件名）-Toy模板网

这篇具有很好参考价值的文章主要介绍了windows.open 在vue前端实现文件下载（自定义下载文件名）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

2. 在页面创建下载按钮

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

3. 导入该文件

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

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

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

5. 编写下载方法

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

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

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

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

下载方法的代码

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文章来源地址https://www.toymoban.com/news/detail-451009.html

'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',

到了这里，关于windows.open 在vue前端实现文件下载（自定义下载文件名）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！