js如何导出exel文件?

JavaScript012

js如何导出exel文件?,第1张

简单的办法:使用js生成一个table,可以直接复制到excel中,网上有很多表格插件。

复杂的办法:js传递数据到服务器,服务器生成表格后返回一个下载链接。

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的BrendanEich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

MicrosoftExcel是微软公司的办公软件Microsoftoffice的组件之一,是由Microsoft为Windows和AppleMacintosh操作系统的电脑而编写和运行的一款试算表软件。Excel是微软办公套装软件的一个重要的组成部分,它可以进行各种数据的处理、统计分析和辅助决策操作,广泛地应用于管理、统计财经、金融等众多领域。

1. 调用后端接口导出文件

示例下载接口url https://gold-cdn.xitu.io/extension/0.3.9/package.crx

1.1 window.open(url)

会打开一个新窗口,开始下载后会自动关闭新窗口。Safair 下载后没有关闭新窗口。

Chrome、IE、Safair支持,貌似火狐不支持

1.2 window.location=url

在当前窗口下载

Chrome、Safair支持

1.3 iframe

在HTML中,iframe 的属性用src,但在JS中,只有部份浏览器支持修改src(读是没问题),真正通用的是要修改对应框架的href值。

1.4 <a href="url" download="filename">点击链接下载</a>

HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载,目前只有chrome、firefox、opera、Edge支持。常用此方法点击下载图片。

IE既不支持a标签的download属性也不允许js调用a 标签的click方法。

2. 前端直接导出文件到本地

2.1 将数据转成DataURI用<a>标签下载

<a href="DataURI" download="filename">点击链接下载</a>

Data URI Scheme

Data URI Scheme是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI。 Data URI Scheme一般用于将经过base64编码的数据嵌入网页中,从而减少请求资源的链接数。IE8 之前的版本都不支持 data URI scheme。

DataURI的格式:

生成DataURI的方式

1. encodeURIComponent

使用这种方式,当数据过多时,URI长度容易超出浏览器限制。 encodeURIComponent常用来转码接口参数,为了避免服务器收到不可预知的请求,对任何用户输入的作为URI部分的内容都需要用encodeURIComponent进行转义。

2. URL.createObjectURL

URL.createObjectURL的参数是File对象或者Blob对象

IE10以下不支持URL.createObjectURL

2.2 windows.navigator.msSaveBlob IE10~Edge 专用

msSaveBlob 是IE10~Edge 私有方法。

2.3 execCommand

有的资料有提到IE9可以使用execCommand方法来保存数据到本地文件,但是我自己没有验证过,不知道是否可行。而且MDN文档中execCommand没有查到SaveAs命令。这块只是做个小记录。

js数据直接导出/下载数据到本地到方法总结

本文转载自:https://juejin.im/post/5cd00253518825418f6f2a8c?utm_source=gold_browser_extension

无非是这样的一个过程。先通过数据库查询出数据,放到List里,然后把这个List发往页面,然后遍历这个List把数据显示到这个表格里。 要想把数据导出到execel,很简单,把页面接受的这个List用jxl写到Execel就行了。具体将List导出到Execel的类如下:

package cms.dao

import java.io.IOException

import java.io.OutputStream

import java.sql.Connection

import java.sql.PreparedStatement

import java.sql.ResultSet

import java.util.List

import javax.servlet.http.HttpServletResponse

import jxl.Workbook

import jxl.write.WritableSheet

import jxl.write.WritableWorkbook

import cms.utlis.DbUtils

public class ToExecelByQuery {

//方法接受两个参数,一个是list,这个地方我用了泛型。另一个参数是HttpServletResponse response

public static void toExcelBy(List<AccessLog>list,HttpServletResponse response) {

// 创建工作表

WritableWorkbook book=null

response.reset()

// 创建工作流

OutputStream os =null

try {

// 设置弹出对话框

response.setContentType("application/DOWLOAD")

// 设置工作表的标题

response.setHeader("Content-Disposition",

"attachmentfilename=****.xls")//设置生成的文件名字

os = response.getOutputStream()

// 初始化工作表

book = Workbook.createWorkbook(os)

} catch (IOException e1) {

// TODO Auto-generated catch block

e1.printStackTrace()

}

try{

//以下是我做的导出日志的一个模版

int nCount = list.size()

WritableSheet sheet = book.createSheet("访问日志", 0)

// 生成名为"商品信息"的工作表,参数0表示这是第一页

int nI = 1

// 表字段名

sheet.addCell(new jxl.write.Label(0, 0, "日志编号"))

sheet.addCell(new jxl.write.Label(1, 0, "用户ID"))

sheet.addCell(new jxl.write.Label(2, 0, "用户姓名"))

sheet.addCell(new jxl.write.Label(3, 0, "访问日期"))

sheet.addCell(new jxl.write.Label(4, 0, "访问时间"))

sheet.addCell(new jxl.write.Label(5, 0, "名片ID"))

sheet.addCell(new jxl.write.Label(6, 0, "名片名称"))

sheet.addCell(new jxl.write.Label(7, 0, "创建日期"))

sheet.addCell(new jxl.write.Label(8, 0, "更新日期"))

// 将数据追加

for(int i=1i<list.size()i++){

sheet.addCell(new jxl.write.Label(0, i, list.get(i).toString()))

sheet.addCell(new jxl.write.Label(1, i, list.get(i).getUserId()))

sheet.addCell(new jxl.write.Label(2, i, list.get(i).getUsername()))

sheet.addCell(new jxl.write.Label(3, i, list.get(i).getCrtTim()))

sheet.addCell(new jxl.write.Label(4, i, list.get(i).getComplTime()))

sheet.addCell(new jxl.write.Label(5, i, list.get(i).getCopId()))

sheet.addCell(new jxl.write.Label(6, i, list.get(i).getFirstname()))

sheet.addCell(new jxl.write.Label(7, i, list.get(i).getCrtTim()))

sheet.addCell(new jxl.write.Label(8, i, list.get(i).getUpdTim()))

}

book.write()

book.close()

} catch (Exception e) {

e.printStackTrace()

}

}

}