vue2 Excel导出数据 js-xlsx的使用

https://www.jianshu.com/p/ea115a8e9107
小世界最温暖 关注

2018.11.19 16:08 字数 280 阅读 422评论 0喜欢 0

大多数文章写出的都是打包的项目配合js-xlsx使用的Excel导出方法,对于普通引用vue写出的页面配合js-xlsx导出页面却没有教程,其实很简单,今天分享一下教程

js-xlsx 地址 https://github.com/SheetJS/js-xlsx


<script src="./shim.min.js"></script>

<script src="./xlsx.full.min.js"></script>


再像以上这样引用之后,然后就是导出的函数了,主要就是要按照它的数据格式来

function exportExcel(excelname){

var self = this;

var _data = [

[ "id",    "name", "value" ],

[    1, "sheetjs",    7262 ],

[    2, "js-xlsx",    6969 ]

];

var worksheet = XLSX.utils.aoa_to_sheet(_data);

var new_workbook = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(new_workbook, worksheet, excelname?excelname:"SheetJS");

XLSX.writeFile(new_workbook, excelname?(excelname+'.xlsx'):"sheetjs.xlsx");

}


以上函数中,_data里就是示例数据,必须将你的数据按照它的规格格式化,导出才会没有问题,其中_data的第一个数组是表格列名称数组,然后下面的 数组是数据数组,试试吧,有问题可以call我,希望对你有帮助

vue2 Excel导出数据 js-xlsx的使用的更多相关文章

  1. Excel向数据库插入数据和数据库向Excel导出数据

    为了熟悉java里工作簿的相关知识点,所以找了“Excel向数据库插入数据和数据库向Excel导出数据”的功能来实现. 注意事项:1,mysql数据库: 2,需要导入的jar包有 jxl.jar,my ...

  2. JAVA实现Excel导出数据(以写好的Excel模版导出)

    工作中经常会有将后台数据以Excel导出的功能. 简单的方法有将response的contentType设置为application/vnd.ms-excel: 或在JSP页面直接设置成: <% ...

  3. 通过Workbook类 生成Excel导出数据

    需求: 实现错误信息生成Excel保存到本地让用户查看. 刚开始使用了微软自带的Microsoft.Office.Interop.Excel类库. Microsoft.Office.Interop.E ...

  4. Excel导出数据Excel.Application组件权限设置方法

    很多网络应用系统都会涉及到数据采用Excel方式导出的模块,部分朋友问我到底怎么弄,其实方式很多种,目前比较优秀的方式还是直接用Excel的Excel.Application方式比较合适. 采用Exc ...

  5. 使用html替代excel导出数据的优势和技巧

    之前一直使用NPOI或者微软office官方组件导出excel,但是多多少少会有写小问题,不是数据量不能过大(xls的问题,用xlsx就可以更大了),就是速度慢,或者文件体积太大 中途采用过csv(逗 ...

  6. thinkphp5中使用excel导出数据表格(包涵图片)

    首先使用composer require phpoffice/phpexcel下载安装phpexcel包. 将包放入extend下面. 不附加图片的导出 /** * 导出excel(不带图片) * @ ...

  7. Thinkphp实现excel导出数据

    前端: 点击导出触发click事件,传值export指令和args关键字(args是指我们是否有查询取哪些数据)到控制器 $(document).on("click", " ...

  8. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

  9. Delphi实现带有格式的Excel导出功能

    功能预览 运行预览 模板样式 存储返参 导出的Excel 2. 代码实现 //执行sql的函数 procedure TForm1.GetReportData(astrsql:string); var ...

随机推荐

  1. 无线连接网络-FAST SSID Change

    这篇随笔主要记录的是Apple设备连接思科无线可能出现的问题,尤其是在思科WLC3504下部署的无线网络,这种故障体现的尤为明显. For Single SSID To support Apple i ...

  2. vue.js 强行赋值、刷新数组或者对象 方法之 $.set()

    实际开发过程中,数据交互的的时候需要赋值,刷新,但是不可能每次赋值之后都刷新整个页面,所以就要用到 vue.js方法 $.set(),能实现赋值对象的局部刷新 语法:Vue.set(object, k ...

  3. 「Luogu P5080 Tweetuzki 爱序列」

    题目大意 给出一些数,需要求出 \(\frac{a_{i+1}}{3}=a_i\) 或 \(a_{i+1}=2 \times a_i\) 时最长的序列 \(a\). 分析 可以发现符合条件的序列 \( ...

  4. 安装插件报错error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++

    起因:学到多线程greenlet模块时,greenlet模块死活装不上,以为pycharm坏掉了,浪费了一下午. #pip3 install greenlet from greenlet import ...

  5. windows与linux的文件路径

    在windows操作系统中,文件路径的分隔符是反斜杠(“\\”),例如: E:\\hsta\\pdf(这里为防止转义,所以要写成两个反斜杠) 但是在linux操作系统中,文件的分隔符是斜杠(“/”), ...

  6. Wcf托管在IIS中,HttpContext.Current为空

    config中需要配置 <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/> 另需要在服务类上加 ...

  7. 【网摘】模仿 placeholder 属性

    /*为空时显示 element attribute content*/ .project-task-edit .subtask-body-txt:empty:before { content: att ...

  8. How2J学习java-1、环境配置

    JDK环境变量配置分下载,配置,验证三个步骤. 一.首先需要到JDK下载网站下载所需的JDK版本可根据更新来定.主流的开发工具Idear下载. 1.首先看配置成功后的效果 点WIN键->运行(或 ...

  9. 【转载】Eclipse vs IDEA快捷键对比大全(win系统)

    花了几天时间熟悉IDEA的各种操作,将各种快捷键都试了一下,感觉很是不错! 以下为我整理了一下开发过程中经常用的一些Eclipse快捷键与IDEA的对比,方便像我一样使用Eclipse多年但想尝试些改 ...

  10. 怎么HTML表格中的所有字体居中?

    一开始,我在table标签里加入align="center"  发现没什么用.... 后来在css里加入,就可以了 成果如图: