如何创建文件下载按钮？ < a href>和Axios无法正常工作 [英] How to create a file download button? <a href> and Axios not working

问题描述

我正在尝试在个人网站上创建一个下载按钮，供人们下载docx简历，但存在一些问题。

I'm trying to create a download button on my personal website for people to download my docx resume, but had some issues.

首先，我使用简单的方法href链接有点像

first i did it with simple href link thingy like

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

，但没有用。

然后我尝试了axois方式，创建了一个将click操作绑定到downloadFile（）{}方法的按钮，但没有成功，并出现了错误

then i tried axois way, creating a button with the click action bind to the downloadFile(){} method, didn't work, coming with the error

GET http：// localhost：8080 / assets / assets / imgs / cv_eudora.docx 404（未找到）

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中编写路径的正确方法。路径本身应该是正确的，因为当我执行该操作时，它甚至始终具有自动提示选项。

I think it's because the url part in the downloadFile(){} function that's not stated properly, but don't know the right way to write the path in vue. The path itself should be right because it even had the automatic hint options all the way when i did it.

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

downloadFile() {
      axios({
        url: "../assets/imgs/cv_eudora.docx",
        method: "GET",
        responseType: "blob" // important
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "eudoraCV.docx"); //or any other extension
        document.body.appendChild(link);
        link.click();
      });
    }

推荐答案

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

The issue here is that the Webpack loaders do not apply to <a href> URLs so they won't be included in your build by default.

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

You have two options here...

1. 将文件放在 公共文件夹并像这样引用它

1. Put your file in the public folder and reference it like this

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>

或

显式导入您的文件使用 require（） 函数

Explicitly import your file using the require() function

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

但是要使此功能起作用，您需要配置Webpack加载 .docx 文件通过 file-loader 。在 vue.config.js 中，您可以通过添加新的模块规则来告诉Webpack捆绑文档...

For this to work however, you need to configure Webpack to load .docx files via the file-loader. In vue.config.js, you can tell Webpack to bundle documents by adding a new module rule...

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

这篇关于如何创建文件下载按钮？ < a href>和Axios无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！