102
2022-10-07 09:051. 前端导出Excel
GoReport是基于J2EE和WEB的综合报表解决方案，特有的EXCEL+绑定数据列的报表设计方式，行列对称，能够轻松处理复杂的报表展现样式，部署方式简单而灵活，具有强大的报表展示功能。
GoReport报表工具前端使用Dhtmlx作为页面显示，本次升级将原有的html页面全部更新为Dhtmlx控件显示，主要是为了和公司的t-eplat平台界面风格一致，与t-eplat平台集成后感觉不出是两套系统。
GoReport报表工具使用Fis解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。 GoReport报表工具使用beetl模版引擎对sql语句进行逻辑处理、参数配置、用户信息获取等，使得报表数据获取更加灵活、高效。
GoReport报表工具使用Spring security进行企业级权限控制，Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架。Spring security为应用系统提供声明式的安全访问控制功能，减少了为企业系统安全控制编写大量重复代码的工作。
报表工具使用Spring data jpa简化创建 JPA 数据访问层和跨存储的持久层功能。Spring Data是一个用于简化数据库访问，并支持云服务的开源框架。其主要目标是使得对数据的访问变得方便快捷，并支持map-reduce框架和云计算数据服务。通过使用Spring Data不仅简化和优化的代码质量，而且为GoReport报表工具的将来的大数据规划提供支撑。
GoReport报表工具使用自主研发的模型、模板、视图管理来简化页面开发，提供一种高效、稳定的开发模式，来简化前端页面与后台交互的开发。 GoReport报表工具使用Poi开源库来进行数据源与excel的绑定，从而生成各种excel样式报表。
GoReport报表工具使用jasperReports开源库对excel样式无法完成的报表进行编写，虽然jasperReports学习成本和开发难度都比较大，但可以对excel报表无法完成的功能进行补充。
2. 前端导出excel合并单元格
javascript才能完成的东西，确实在IE浏览器的js调用的ActiveX形成的前端，数据导出到excel，但这种方法在其他浏览器中是不常见的。
数据导出到Excel，最好的方法是，在服务端的Excel数据，然后发送到前端的负载。您可以使用脚本。JAVA生成的一些开源组件，支持Excel。
3. 前端导出excel乱码
pdf转Excel能够转换，1、文本内容的pdf可以用Adobe Acrobat，wondershare转2、图片内容、转曲的或扫描版就用ocr转如泰比（abbyy finereader）打开文件识别结束后另存为excel格式
4. 前端导出excel表格
想在显示窗体的时候窗体一直在EXCEL表格的最前面，那么在显示窗体的语句处使用有模的方式打开，就是在show后面加个1：例如：sub auto_open()formname.show 1end sub 如果是fromname.show 0 或者formname.show则窗体不会强制在最前面 如果想只显示窗体，EXCEL隐藏，则可通过下面语句可以设置EXCEL为不可见，只显示窗体：private sub From_Load()application.visible=falseend sub
5. 前端导出excel应该吗?
可以选择导出数据，然后保存到excel。
6. 前端导出excel无法打开
背景
在学习微信小程序的过程中，需要导出excel文件数据，可是却没有后台服务器，所以只能够想着使用纯前端去导出excel
使用插件：excel-export
导出思想
将数据封装成excel文件
将excel文件上传到云存储中
将云存储的excel文件以图片的格式下载到本地
修改图片文件后缀为xlsx，成为excel文件
操作
将数据封装成excel文件；将excel文件上传到云存储中
建立云函数（我的云函数名称:uploadexportfile），打开云函数终端，安装excel-export插件
// 云函数入口文件
const cloud = require('wx-server-sdk')
const nodeExcel = require('excel-export');
const path = require('path');
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
var tableMap = {
styleXmlFile:path.join(__dirname,"styles.xml"),
name: Date.now()+"-export",
cols: [],
rows: [],
}
var tableHead = ["编号", "名称", "生日", "年龄"];
//添加表头
for(var i=0;i<tableHead.length;i++){
tableMap.cols[tableMap.cols.length]={
caption:tableHead[i],
type:'string'
}
}
//表体：伪数据
const tableList = [
{编号:0,名称:'张三',生日:'2019-5-1',年龄:20},
{编号:1,名称:'李四',生日:'2019-5-1',年龄:45}
]
//添加每一行数据
for(var i=0;i<tableList.length;i++){
tableMap.rows[tableMap.rows.length]=[
tableList[i].编号,
tableList[i].名称,
tableList[i].生日,
tableList[i].年龄
]
}
//保存excelResult到相应位置
var excelResult = nodeExcel.execute(tableMap);
var filePath = "outputExcels";
var fileName = cloud.getWXContext().OPENID + "-" + Date.now()/1000 + '.xlsx';
//图片上传到云存储
return await cloud.uploadFile({
cloudPath: path.join(filePath, fileName),
fileContent: new Buffer(excelResult,'binary')
}).then(res=>{
console.log(res.fileID);
return res;
}).catch(err=>{
});
}
DOWNLOAD
//导出excel
function exportFile(dataHeader,dataList){
wx.showLoading({
title: '正在导出',
});
console.log(dataHeader);
console.log(dataList);
wx.cloud.callFunction({
name:'uploadexportfile',
data:{
dataHeader:dataHeader,
dataList:dataList
}
}).then(res=>{
const fileID = res.result.fileID;
//下载文件
wx.cloud.downloadFile({
fileID: fileID
}).then(res1 => {
this.saveFileToPhotosAlbum(res1);//保存文件到相册
this.delCloudFile(fileID);//删除云存储文件
}).catch(error => {
// handle error
})
}).catch(err1=>{
});
}
//保存文件到本地相册
function saveFileToPhotosAlbum(res){
//授权
this.writePhotosAlbumAuth();
// 保存文件
var saveTempPath = wx.env.USER_DATA_PATH + "/exportFile"+new Date().getTime()+".jpg";
wx.saveFile({
tempFilePath: res.tempFilePath,
filePath: saveTempPath ,
success:res1=> {
//获取了相册的访问权限，使用 wx.saveImageToPhotosAlbum 将图片保存到相册中
wx.saveImageToPhotosAlbum({
filePath: saveTempPath ,
success: res2 => {
//保存成功弹出提示，告知一下用户
wx.hideLoading();
wx.showModal({
title: '文件已保存到手机相册',
content: '文件位于tencent/MicroMsg/WeiXin下 \r\n将保存的文件重命名改为[ .xlsx ]后缀即可正常打开',
confirmColor: '#0bc183',
confirmText: '知道了',
showCancel: false
});
},
fail(err2) {
console.log(err2)
}
})
}
});
}
//删除云存储文件
function delCloudFile(fileID){
const fileIDs=[];
fileIDs.push(fileID);
//删除云存储中的excel文件
wx.cloud.deleteFile({
fileList: fileIDs,
success: res4 => {
// handle success
console.log(res.fileList);
},
fail: console.error
})
}
//上传单个文件
function uploadSingleFile(cloudPath,filePath){
wx.cloud.uploadFile({
cloudPath: cloudPath, // 上传至云端的路径
filePath: filePath, // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
},
fail: console.error
})
}
//微信图片保存到本地相册授权
function writePhotosAlbumAuth(){
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope:'scope.writePhotosAlbum',
success() {
console.log('授权成功')
}
})
}
}
})
}
module.exports={
uploadSingleFile:uploadSingleFile,
exportFile:exportFile,
saveFileToPhotosAlbum:saveFileToPhotosAlbum,
delCloudFile:delCloudFile,
writePhotosAlbumAuth:writePhotosAlbumAuth
}
7. 前端导出excel文件
导出时自由选择路径的代码如下：
1、后台输出Excel文件代码：
OutputStream output = response.getOutputStream();
response.reset();
response.setHeader("Content-disposition", "attachment; filename=" + path);
response.setContentType("Content-Type:application/vnd.ms-excel ");
wb.write(output);
output.close();
2、前端代码：
window.open("getExcelList","_blank");
8. 前端导出excel怎么这么麻烦
正版的spreadjs需要收费，在办公的过程中一般需要开发授权和部署授权，最低买一个开授权8200元，再买一个部署授权8000元左右，大家可以根据自己的实际需求进行购买。
现在很多人喜欢使用spreadjs，主要是因为它操作起来更加的方便，为人民省去大量的时间。并且，spreadjs的功能丰富，可操作性强，基本满足目前所有业务流程，并且支持功能扩展。可以支持导入Excel，之前Excel创建的模板可以有效利用，并且提供设计器功能，可以通过设计器快速构建模板。还支持前端导出和打印功能，可以方便使用人员快速导出，打印，可以说是Excel软件的升级版，让大家体验到办公更加的流畅。
Spreadjs的出现将为开发人员提供更为容易的使用体验和更高效的产品性能，帮助企业用户适应未来愈发复杂的场景需求，极大地节省企业研发成本并降低项目交付风险，是非常实用的一款软件。
9. 前端导出excel表格转了之后还是无法打开
GET请求和POST请求要看情况而定
GET请求方式是比较简单的，简单的处理前端只需要通过一个a标签就能实现导出或下载。
但是使用GET请求的需要考虑：
检索条件多不多，其次就是如果检索条件拼接在请求URL上会不会超过请求URL的最大长度。如果请求URL的长度超过浏览器的限制长度，浏览器将会将请求自动截断。
GET请求适用于导出所有数据或者是有个把检索条件并且检索条件长度不是特别长的。总之简单导出使用GET请求还是很香的！
POST请求的方式做导出比较的麻烦，需要前后端配合来使用，为了确保更好的用户体验（在用户点击导出或下载后，可以看到文件的下载进度），通过流的方式来实现导出或下载。
后端将处理好的数据存储在Excel表格中，读取Excel表格，以流的方式响应给前端；
前端通过Blob类型接收，通过window.URL.createObjectURL()创建源路径，使用document文档对象创建一个a标签；为a标签添加href属性和值（值就是源路径），为a标签设置download属性和值（值就是被下载的文件名），将指定a标签节点加到document.body的末尾，最后为a标签设置一个自触发的点击事件。
POST请求最适用于检索条件多的场景
- 相关评论
- 我要评论
-