gpt4 book ai didi

vue.js - 如何创建文件下载按钮? 和 Axios 不工作

转载 作者:行者123 更新时间:2023-12-03 06:44:08 25 4
gpt4 key购买 nike

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

首先我用简单的 href 链接来做这件事

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

但是没用。

然后我尝试了 axois 方式,创建了一个带有点击 Action 的按钮绑定(bind)到 downloadFile(){} 方法,没有用,出现了错误

GET http://localhost:8080/assets/assets/imgs/cv_eudora.docx 404 (Not Found)

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)

screenshot

我觉得是因为downloadFile(){}函数中的url部分没有写好,不知道vue中路径的正确写法。路径本身应该是正确的,因为当我这样做时,它甚至一直都有自动提示选项。

<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,因此默认情况下它们不会包含在您的构建中。

这里有两个选择...

  1. 将你的文件放入the public folder并像这样引用它

    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

关于vue.js - 如何创建文件下载按钮? <a href> 和 Axios 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57549867/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com