vue实现下载excel表格俩种方式

一般类似功能都会放到后端来做，当然作为一项扩展技能，前端开发人员也应该掌握。

今天，给大家介绍前端实现excel表格下载的俩种方式

方式一、

const jsonData = [{order:1,name:'小明',age:12},{order:2,name:'小张',age:20}]
if (!jsonData.length) return
// 表格的列标题 如果出现科学技术法或者其他格式 使用 \t 
let title = '序号,名称,年龄\n'
jsonData.map(item => {
	let key = {}
	key['序号'] = item.order
	key['名称'] = item.name
	key['年龄'] = item.age
	for (let i in key){
		title += `${key[i] + '\t'},`
	}
	title += '\n'
})
// encodeURIComponent 解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title)
// 创建a标签
let link = document.createElement('a')
link.href = uri
link.download = `${new Date().toLocaleString()}_数据表_${jsonData.length}条.csv`
link.click()

效果图：

虽然实现了我们的需求，但是表格看起来不够美观

方式二、
创建一个dom表格，可以添加样式

  

    
序号
    
名称
    
年龄
  
  

    
{
    {item.order}}
    
{
    {item.name}}
    
{
    {item.age}}
  

获取到表格节点，生成dom节点树，生成blob对象

      exportExcel() {
        let oHtml = document.getElementById('table').outerHTML
        let excelHtml = `
        
          
            
            
	           
	          
	            ${oHtml}
	          
	        `;
	    // 生成blob对象
        let excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})
        // 创建一个a标签
        let oA = document.createElement('a');
		// 利用URL.createObjectURL()方法为a元素生成blob URL
        oA.href = URL.createObjectURL(excelBlob);
		// 给文件命名
        oA.download = `${new Date().toLocaleString()}_提现数据表_${this.jsonData.length}条.xlsx`;
		// 模拟点击
        oA.click();
      },

效果图：

可以看到我们的表格宽度是200，以及我们添加的背景边框等额外样式，完美实现。