如何创建文件下载按钮？<a href> 和 Axios 不工作

Question

我试图在我的个人网站上创建一个下载按钮，供人们下载我的 docx 简历，但遇到了一些问题。

首先我用简单的 href 链接来做到这一点

<a href="xxx.docx" download><button>download my resume</button></a>

但没有用。

然后我尝试了 axois 方式，创建一个按钮，并将单击操作绑定到 downloadFile(){} 方法，但不起作用，出现错误

获取http://localhost:8080/assets/assets/imgs/cv_eudora.docx404（未找到）

Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:59)

我认为这是因为 downloadFile(){} 函数中的 url 部分没有正确说明，但不知道在 vue 中编写路径的正确方法。路径本身应该是正确的，因为当我这样做时，它甚至一路上都有自动提示选项。

Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:59)

<button @click="downloadFile()">download my resume</button>

Answer 1

这里的问题是 Webpack 加载器不适用于<a href>URL，因此默认情况下它们不会包含在您的构建中。

你在这里有两个选择......

1. 将您的文件放入文件夹中并public像这样引用它

   export default {
     // add the base URL to your component's "data" function
     data: () => ({ publicPath: process.env.BASE_URL })
   }
   

   <a :href="`${publicPath}cv_eudora.docx`" download>
     download my resume
   </a>
   

   或者

2. require()使用该函数显式导入您的文件

   <a :href="require('../assets/imgs/cv_eudora.docx')" download="cv_eudora.docx">
     download my resume
   </a>
   

   然而，要实现此功能，您需要将 Webpack 配置为.docx通过file-loader. 在 中vue.config.js，您可以通过添加新的模块规则来告诉 Webpack 捆绑文档...

   module.exports = {
     chainWebpack: config => {
       config.module.rule('downloads')
         // bundle common document files
         .test(/\.(pdf|docx?|xlsx?|csv|pptx?)(\?.*)?$/)
         .use('file-loader')
           // use the file-loader
           .loader('file-loader')
           // bundle into the "downloads" directory
           .options({ name: 'downloads/[name].[hash:8].[ext]' })
     }
   }
   

   请参阅https://cli.vuejs.org/guide/webpack.html#adding-a-new-loader