Vue 下载Excel的方法找了好久希望对大家有帮助！！！

Keep of Dream

已于 2022-10-26 11:24:40 修改

阅读量655

点赞数

文章标签： javascript html

于 2022-10-26 11:23:09 首次发布

原文链接：https://blog.csdn.net/Vue2018/article/details/105390392/?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0--blog-88820962.pc_relevant_3mothn_strategy_recovery&spm=1001.2101.3001.4242.1&utm_relevant_index=3

版权

第一种方法

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()

第二种方法是

HTML部分

<table id="table" style="position: fixed;left: -10000px;">
<tr>
<th>序号</th>
<th>名称</th>
<th style="width:200px">年龄</th>
</tr>
<tr v-for="(item,index) in jsonData">
<td>{{item.order}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
Javasript部分

exportExcel() {
let oHtml = document.getElementById('table').outerHTML
let excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
   table{
               min-width: calc(100vw - 290px);
               /*margin-top: 50px;*/
               border-collapse: collapse;
               border-spacing: 0;
               border: 1px #eee solid;
               border-radius: 50px;
              }
               table tr{
               height:50px;
               border: 1px #eee solid;
               white-space: nowrap;
               }
               table tr th{
               border: 1px #eee solid;
               background-color: #e1f0fe;
               }
               table tr td{
               border: 1px #eee solid;
               white-space: nowrap;
               padding: 30px 20px;
               text-align: center;
               }
   </style>
   </head>
   <body>
   ${oHtml}
   </body>
   </html>