vue 2.0与vue 3.0中的本地文件下载_王王王晓晓蓉的博客-程序员资料_vue2.0js文件下载

技术标签: vue.js  javascript  

需求:获取静态资源文件export.pdf,将pdf文档下载至本地
方案:利用axios请求,get请求用blob流的方式下载

项目1:vue 2.0 + element ui+es5中

利用a标签,给个点击事件download()

<a id="attname" class="attname" href="javascript:void(0);" @click="download">帮助文档</a>

页面已经引用过axios,使用如下:

import axios from 'axios';

Download方法中为避免无法导出,将待导出文件名称改为英文“export.pdf”,导出后的名称设置为中文名称“测试.pdf”;
待导出文件放在“static”文件夹下;

download(){
             
    axios.get('static/export.pdf', {
               
    responseType: 'blob', //重要
}).then(response => {
               
    const url = window.URL.createObjectURL(new Blob([response.data]));           
    const link = document.createElement('a');           
    let fname = '测试.pdf';           
    link.href = url;           
    link.setAttribute('download', fname);           
    document.body.appendChild(link);           
    link.click();         
});            
}

项目2:vue 3.0 + iview ui+typescript中

利用a标签,给个点击事件download()

<a id="attname" class="attname" href="javascript:void(0);" @click="download">帮助文档</a>

页面引用axios

import axios from 'axios';

Download方法中为避免无法导出,将待导出文件名称改为英文“export.pdf”,导出后的名称设置为中文名称“测试.pdf”;
在“public”文件夹下建“export”文件夹,放待导出文件;

download () {
              
axios.get('export/export.pdf', {
    //静态资源文件夹public            
    responseType: 'blob', //重要          
}).then(response => {
                
    const url = window.URL.createObjectURL(new Blob([response.data]));            
    const link = document.createElement('a');            
    let fname = '测试.pdf';            
    link.href = url;            
    link.setAttribute('download', fname);            
    document.body.appendChild(link);            
    link.click();          
}).catch(error => {
                
    console.log('error:'+JSON.stringify(error))          
});        
}

其中,在项目2的使用过程中遇到了问题,将待下载文件放在“static”或“assets”文件夹下,始终获取不到待下载文件,不同的后缀的文件“.json、.ts”等都是404找不到。
原因:vue cli3.0中静态资源文件夹为“public”,在“public”文件夹下建“export”文件夹,放待导出文件“export.pdf”后,返回状态码200,下载正常。
vue cli2.0的静态文件是static
vue cli3.0的静态文件是public

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42555643/article/details/122457963

智能推荐

Oracle12c查询不同pdb有哪些新建用户[email protected]的博客-程序员资料_查看pdb用户

描述: 先查询系统有哪些pdb,然后根据pdb的con_id查询特定pdb有哪些新建用户(新建的时间是不同于系统的默认时间20140911)操作:C:\Users\v074&gt;sqlplus / as sysdbaSQL*Plus: Release 12.1.0.2.0 Production on 星期三 6月 5 09:11:27 2019Copyrigh..._1671465600

英文写作——The Elements of Style知识点解读2—逗号的用法_J同学的大气笔记的博客-程序员资料

英文写作——The Elements of Style知识点解读2—逗号的用法超认真超详细的总结!

AJAX/JSF2/基于JSF2的框架_云道轩的博客-程序员资料_jsf2框架ajax请求

<br />其实我从来没有作为公司的程序员生成过,但是如今却对AJAX/JSF2/基于JSF2的框架如此的关心。最近经历的产品开发有点诡异,需求原型有两个,一个是基于JQuery的高保真原型,一个是用原型制作工具制作的低保真原型,不过这两个原型同最后用程序实现的可运行程序(EXT JS)都不一样。而且我阅读EXT JS的版权协议后,发现随意使用EXT JS是违法的。<br /> <br />我经过选择实践后,决定采用JSF2做原型。现在基本可以快速实现需求原型,但是还不完美,因为我还没有真正开始学习JSF2

[kuangbin带你飞]专题十二 基础DP1 I - 最少拦截系统_Amaswz的博客-程序员资料

最少拦截系统Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 32242    Accepted Submission(s): 12660Problem Description某国为了防御敌国的导弹袭击,发展出

CCProxy代理_thomas_blog的博客-程序员资料

只要局域网内有一台机器能够上网,其他机器就可以通过这台机器上安装的CCProxy来代理共享上网,最大程度的减少了硬件费用和上网费用。只需要在服务器上CCProxy代理服务器软件里进行帐号设置,就可以方便的管理客户端代理上网的权限帐号设置 设置需要代理的帐号 新建帐号 点击问号,可以自动获取本机地址 ie代理设置 连接测试 启动监控 代理连接成功 ...

Libra2.0的无奈_区块链新观的博客-程序员资料

这几天人民币数字货币(DCEP)内测的消息疯传,已经确定会在深圳,苏州,雄安,成都以及未来的冬奥场景进行内部封闭测试。DCEP已经落地的消息喧嚣尘上。几乎在同一时间,Libra发布了2.0版的白皮书。在这个法币国际化的新领域,中美都铆足了劲。1Libra2.0做出了哪些重要改变与旧版白皮书相比,新版白皮书主要有三点值得关注的变化:1.提出了Libra不只是锚定“一篮子货币”,也...

随便推点

自己动手开发智能聊天机器人完全指南(附python完整源码)_数据饕餮的博客-程序员资料

一、前言人工智能时代,开发一款自己的智能问答机器人,一方面提升自己的AI能力,另一方面作为转型AI的实战练习。在此把学习过程记录下来,算是自己的笔记。二、正文2.1 下载pyaiml下载pyaiml2.2 安装pip install aiml安装aiml2.3 查看安装完成后,查看包信息,pip show查看aiml包信息三、源码3.1 智能机器人测试程序主程序3.2 配置文件配置文件3.3 AI

System V IPC vs POSIX IPC_guiwin的博客-程序员资料

TIP:What are the differences between System V IPC and POSIX IPC ? Why do we have two standards ? How to decide which IPC functions to use ?ANS:Both have the same basic tools -- semaphores, shar...

ACPI BIOS Error (bug): Failure creating named object_不可以不读书的博客-程序员资料

安装ubuntu时出现上诉问题当我们在为有独立显卡gpu的电脑安装Ubuntu系统时,有可能会遇到上述的问题。解决方法一:先把显示器接到集成显卡上,装完系统后,再接到独立显卡gpu,再为gpu配置驱动;解决方法二:当电脑没有集成显卡时,选择UEFI General ...disk进行安装,当安装过程进入到四个选项(try ubuntu, install ubuntu……),点击"e"进入edit mode,找到"quiet splash ---",把“---”换成“nomodeset”,然.

2022N1叉车司机考试题模拟考试题库及模拟考试_女王219的博客-程序员资料

题库来源:安全生产模拟考试一点通公众号小程序2022N1叉车司机考试100题系N1叉车司机模拟考试题库模拟预测卷!2022N1叉车司机考试题模拟考试题库及模拟考试依据N1叉车司机考前押题。N1叉车司机考试模拟题通过安全生产模拟考试一点通上在线模拟考试。1、【多选题】《中华人民共和国特种设备安全法》第十四条规定,特种设备()、检测人员和()应当按照国家有关规定取得相应资格,方可从事相关工作。(AB)A、安全管理人员B、作业人员C、维修人员2、【多选题】《特种设备使用管理规则...

Linux部署Jaeger_逆月林的博客-程序员资料

原文链接:https://imscc.io/posts/trace/install_jaeger_on_linux/ 原文作者: 聪少最近在折腾Jaeger,Jaeger官网都是介绍如何通过Docker部署,二进制部署文档基本没有(已咨询过作者,作者说没文档!你参考Docker自己部署好了!!!),所以打算写一篇Linux部署。JaegerJaeger是Uber推出的一款调用链追踪系...

elasticsearch搜索过程分析_ok0011的博客-程序员资料_elasticsearch搜索的过程

(一)通过HTTP请求调用搜索服务 示例:GET http://localhost:9200/index_test/_search{ &amp;quot;query&amp;quot;: { &amp;quot;query_string&amp;quot;: { &amp;quot;default_field&amp;quot;: &amp;quot;title&amp;quot;, &amp;quot;query&amp;quot;:

推荐文章

热门文章

相关标签