前端导入导出

最新推荐文章于 2024-04-25 20:22:26 发布

一万种可能-码农

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量1.1k

点赞数

分类专栏：导入导出文章标签： html js

本文链接：https://blog.csdn.net/xiaoxian_xian/article/details/110926361

版权

导入导出专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在很多后台管理系统里可能会有导出表格，下载表格，下载压缩包等这样的需求。下面说几种简单的下载的方法：

1.最简单的，有文件的地址，直接使用a标签实现下载（通用模板前端本地下载）：

<a href="/user/test/xxxx.xls" download="文件名.xls">点击下载</a>

但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”;
如果再vue项目中需要下载文件需要放在public文件夹下需要下载的路径是相对于index.html文件路径否则会提示下载文件未找到

2.window.open()方法，后端提供下载接口：

html：

<button type="button" id="btn1">window.open()方法下载</button>

js：

（最简单：window.location.href="xxxxx后端给的下载地址"）
var $eleBtn1 = $("#btn1");

//已知一个下载文件的后端接口：

https://codeload.github.com/douban/douban-client/legacy.zip/master

//方法一：window.open()

$eleBtn1.click(function(){
 var url = "https://codeload.github.com/douban/douban-	client/legacy.zip/master";
	window.open(url);
});

3.通过form表单提交的方式：

html：

<button type="button" id="btn2">form方法下载</button>

js：

var $eleBtn2 = $("#btn2");

//已知一个下载文件的后端接口：

https://codeload.github.com/douban/douban-client/legacy.zip/master
$eleBtn2.click(function(){
	var $eleForm = $("<form method='get'></form>");

	$eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");

	$(document.body).append($eleForm);

	//提交表单，实现下载
	$eleForm.submit();
});

4. 数据流转成excel表格下载

utils 写一个js方法导出

// 数据格式
var data = {
   "title": [
           {"value":"A1标题"}, 
           {"value":"B1标题"}
    ],
   "data":[
           [ {"value":"好好"},  {"value":"2015-08-24"} ],
           [ {"value":"123"}, {"value":"hahah"} ]
    ]
 };

/* eslint-disable no-redeclare */
// 参数一：内容  参数二：表格名称  参数三：表头
export function JSONToExcelConvertor(JSONData, FileName, ShowLabel) { 
  //先转化json 
  var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; 
    
  var excel = '<table>';   
    
  //设置表头 
  var row = "<tr>"; 
  for (var i = 0, l = ShowLabel.length; i < l; i++) { 
    row += "<td>" + ShowLabel[i].value + '</td>'; 
  } 
    
    
  //换行 
  excel += row + "</tr>"; 
    
  //设置数据 
  for (var i = 0; i < arrData.length; i++) { 
    var row = "<tr>"; 
      
    for (var index in arrData[i]) { 
      var value = arrData[i][index].value === "." ? "" : arrData[i][index].value; 
      //row += '<td>' + value + '</td>'; 
      // 解决科学记数法
      // eslint-disable-next-line no-useless-escape
      row += '<td style='+ 'mso-number-format:"\@"'+ '>' + value + '</td>';
    } 
      
    excel += row + "</tr>"; 
  } 

  excel += "</table>"; 

  var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>"; 
  excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'; 
  excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel'; 
  excelFile += '; charset=UTF-8">'; 
  excelFile += "<head>"; 
  excelFile += "<!--[if gte mso 9]>"; 
  excelFile += "<xml>"; 
  excelFile += "<x:ExcelWorkbook>"; 
  excelFile += "<x:ExcelWorksheets>"; 
  excelFile += "<x:ExcelWorksheet>"; 
  excelFile += "<x:Name>"; 
  excelFile += "{worksheet}"; 
  excelFile += "</x:Name>"; 
  excelFile += "<x:WorksheetOptions>"; 
  excelFile += "<x:DisplayGridlines/>"; 
  excelFile += "</x:WorksheetOptions>"; 
  excelFile += "</x:ExcelWorksheet>"; 
  excelFile += "</x:ExcelWorksheets>"; 
  excelFile += "</x:ExcelWorkbook>"; 
  excelFile += "</xml>"; 
  excelFile += "<![endif]-->"; 
  excelFile += "</head>"; 
  excelFile += "<body>"; 
  excelFile += excel; 
  excelFile += "</body>"; 
  excelFile += "</html>"; 

    
  var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile); 
    
  var link = document.createElement("a");   
  link.href = uri; 
    
  link.style = "visibility:hidden"; 
  link.download = FileName + ".xls"; 
    
  document.body.appendChild(link); 
  link.click(); 
  document.body.removeChild(link); 
}

引入，传参

import {JSONToExcelConvertor} from '@/utils/export.js'
// 导出
async onExport() {
   try {
     let param = new URLSearchParams()
     param.append('curpage', this.pageNumber)
     param.append('start_time', this.startTime)
     param.append('end_time', this.endTime)
     ...
     const res = await exportList(param) // 点击按钮调接口
     console.log('导出', res);
     if (res && res.code == 200) {
       JSONToExcelConvertor(res.datas.data, "交易流水", res.datas.title )
     }
   } catch (error) {
     console.log(error);
   }
}

一万种可能-码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端导入导出

在很多后台管理系统里可能会有导出表格，下载表格，下载压缩包等这样的需求。下面说几种简单的下载的方法：1.最简单的，有文件的地址，直接使用a标签实现下载（通用模板前端本地下载）：<a href="/user/test/xxxx.xls" download="文件名.xls">点击下载</a>但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”;如果再vue项目中需
复制链接

扫一扫