vue 使用Blob实现下载xls文件

分手后的思念是犯贱 2023-06-27 04:28 41阅读 0赞

1 页面代码

<el-button size="mini" id='testBtn2' @click="test"><i class=" fa fa-search " aria-hidden="true"></i>下载

<a id='testBtn' >下载测试</a>

</el-button>

2 js代码

//测试
    test(){
    
        var box=document.getElementById("test").outerHTML;
        var total=document.getElementById("test").outerHTML
        var html = "<html><head><meta charset='utf-8' /></head><style>table{border:1px;}</style><body> <div align='center'><caption>测试</caption></div>" +box+total + "</body></html>";
        var reg1 = new RegExp('border="0" ' ,'g' );//正则替换
        var html2=html.replace(reg1,'border="1" ');//全局替换replace不是全局替换，仅仅是单个替换
        var blob = new Blob([html2], { type: "application/vnd.ms-excel" }); 
        document.getElementById('testBtn').download="1.xls"
        document.getElementById('testBtn').href= URL.createObjectURL(blob);
        alert("over")
    },

3 示例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200103141617560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+springboot使用文件流实现文件下载

前言本次将使用vue和springboot通过文件流的方式教大家怎么去实现文件的下载，那么话不多说，我们直接开始相关vue导出文件以下链接为我其他vue进行

女爷i/ 2024年04月01日 10:10/ 0 赞/ 120 阅读

相关 vue实现文件下载

引言最近在自己做项目的需求的过程中，需要`vue+springboot`实现文件的下载功能（导出博客文件）。问题重现在我后端文件下载接口开发完成后，使用vu

灰太狼/ 2023年09月23日 19:37/ 0 赞/ 136 阅读

相关 vue实现文件下载

var reader = new FileReader(); reader.readAsDataURL(blob); // 转换为base64，可以直接放入

浅浅的花香味﹌/ 2023年07月12日 03:37/ 0 赞/ 232 阅读

相关 vue 使用Blob实现下载xls文件

1 页面代码 <el-button size="mini" id='testBtn2' @click="test"><i class=" fa fa-search " ari

分手后的思念是犯贱/ 2023年06月27日 04:28/ 0 赞/ 42 阅读

相关 vue中使用文件流进行下载(new Blob),不打开一个新页面下载

export function download (url, params, filename) { Message.warning('导出数据中

一时失言乱红尘/ 2023年02月15日 12:42/ 0 赞/ 332 阅读

相关 blob对象实现文件、图片下载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一世哀愁。/ 2022年12月29日 06:34/ 0 赞/ 220 阅读

相关 Vue 前端导出、下载zip/excel文件流blob

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5aW95YOP5b6I5Ya35LqG

末蓝、/ 2022年12月07日 01:24/ 0 赞/ 404 阅读

相关前台使用blob处理文件流并下载

前台使用blob处理文件流并下载后台处理 @ResponseBody @RequestMapping("/down") public v

水深无声/ 2022年01月31日 09:23/ 0 赞/ 433 阅读

相关 vue 通过 Blob实现异步下载文件

> 前言: > > 我是使用 vue-element-admin 里面统一封装了,请求配置和响应拦截器. > > 通过 window.open(url) 的方式,下载

喜欢ヅ旅行/ 2021年11月16日 13:48/ 0 赞/ 1135 阅读

相关 vue(二) vue中使用blob下载文件

1.post请求上传后对后端解析文件，然后下载 uploadSectionFile(param) { const self = this;

左手的ㄟ右手/ 2021年11月10日 07:50/ 0 赞/ 630 阅读