1. 將要下載的文件放在前端項目的 assets 文件夾內(nèi)

?我要下載的文件為? src/assrts/xxx/xxx模板.csv

?2. 在頁面創(chuàng)建下載按鈕? ?

3. 導(dǎo)入該文件

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

5. 編寫下載方法

參考自：vue 實現(xiàn)本地excel文件下載功能_璐哈路哈呦的博客-CSDN博客_vue下載excel

下載按鈕的方法為downloadARJ，根據(jù)不同文件的文件格式主要就是修改兩個地方：

• 第一個是類型：這個根據(jù)你的文件格式去設(shè)置；? ? ? 常用的類型見最后一張圖
• 第二個是修改你想自定義的名字。

?下載方法的代碼

downloadARJ(){
        const bloc = this.dataURLtoBlob(ArjFileUrl)
        const blob = new Blob([bloc], {
          type: 'text/csv'
        })
        const downLoadEle = document.createElement('a')
        // 通過返回的二進制數(shù)據(jù)來創(chuàng)建一個對象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')
      },
     // 將文件對象先轉(zhuǎn)換為了二進制，再調(diào)用
      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文章來源地址http://www.zghlxwxcb.cn/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',  

到了這里，關(guān)于windows.open 在vue前端實現(xiàn)文件下載（自定義下載文件名）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！