码迷,mamicode.com
首页 > Web开发 > 详细

js 实现的excel解析和预览

时间:2020-01-17 18:44:34      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:cas   按钮   element   方式   plugin   margin   targe   top   binary   

<link href="${rc.contextPath}/res/adminlte/plugins/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
<link href="${rc.contextPath}/res/adminlte/plugins/bootstrap-fileinput/css/fileinput-rtl.min.css" rel="stylesheet">
<script src="${rc.contextPath}/res/adminlte/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>

<script src="${rc.contextPath}/res/excel/jexcel/jexcel.js"></script>
<link href="${rc.contextPath}/res/excel/jexcel/jexcel.css" type="text/css" rel="stylesheet"/>
<script src="${rc.contextPath}/res/excel/jsuites/jsuites.js"></script>
<link href="${rc.contextPath}/res/excel/jsuites/jsuites.css" type="text/css" rel="stylesheet" />
<script src="${rc.contextPath}/res/excel/sheetjs/dist/xlsx.full.min.js"></script>

//文件预览设置预览按钮和上传的组件保持一致  2020/1/9 zjm
$(‘#cardbin-file‘).on(‘filepreupload‘, function(event, data, previewId, index) {
$("#cardBinPreviewBtn").css("margin-top","40px");
});

$(‘#cardbin-file‘).on(‘filecleared‘, function(event) { //清理之后文件变为预览,需要重新上传
$("#cardBinPreviewBtn").css("margin-top","0px");
$("#cardbinCloudFile").val("");
$("#cardbinUploadFlag").val("");
$("#cardBinPreviewBtn").html("Preview");
});
$(‘#cardbin-file‘).on(‘fileuploaderror‘, function(event, data, msg) {
$("#cardBinPreviewBtn").css("margin-top","0px");
});
//文件预览设置预览按钮和上传的组件保持一致 2020/1/9 zjm
 
/*卡bin预览开始 2020/01/09 zjm*/

$("#cardBinPreviewBtn").click(function (e) {
$("#cardBinModal").modal("hide");
let cardBinFile=$("#cardbin-file").val();
//let cardBinCloudFile= $("#cardbinCloudFile").val();
let cardbinUploadFlag=$("#cardbinUploadFlag").val();
if(cardBinFile=="" && cardbinUploadFlag==""){
$(‘#carbin-preview‘).empty();
$("#carbin-preview").html(‘card bin file is blank !‘);
}
$("#cardBinPreviewModal").modal("show");
});

$(‘#cardBinPreviewModal‘).on(‘shown.bs.modal‘, function () {
$("body").addClass(‘modal-open‘);
});

$("#cardBinPreviewModal").on("hidden.bs.modal", function () {
$("body").removeClass(‘modal-open‘);
$("#cardBinModal").modal("show");
});
/*卡bin预览开始 2020/01/08 zjm*/
$("#cardbin-file").change( function(e) {

$("#cardBinPreviewBtn").css("margin-top","0px");//控制预览控件的位置
$("#cardBinPreviewBtn").html("Preview");//重新选择文件提示文件是预览

let files = e.target.files;
let fileName=files[0].name;
let fileExt = fileName.slice(fileName.lastIndexOf(".")+1).toLowerCase();
if("xls" != fileExt && "xlsx"!=fileExt){
$("#carbin-preview").html(‘card bin file type is error !‘);
return ;
}
let fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
var data = ev.target.result;
workbook = XLSX.read(data, {type: ‘binary‘}); // 以二进制流方式读取得到整份excel表格对象
} catch (e) {
console.log(‘文件类型不正确‘ + e);
$("#carbin-preview").html(‘card bin file type is error !‘);
return;
}
let rows=[];
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
rows = rows.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
break; // 如果只取第一张表,就取消注释这行
}
}
debugger
let tableHeader = Object.keys(rows[0])[0];
let excelRows=[];
rows.map((item) => {
excelRows.push(new Array(item[tableHeader]+""));
});
/* let excelRows= new Array();
excelRows[0]=[tableHeader];
rows.forEach(function (val,idx,array) {
arr[idx+1] = new Array();
arr[idx+1][0]=val[tableHeader];
});*/
console.log(excelRows);
$(‘#carbin-preview‘).empty();
jexcel( document.getElementById(‘carbin-preview‘),
{ data:excelRows,
colHeaders: [tableHeader],
colWidths: [310,50,50,50,50],
columns: [
{ type: ‘text‘ },{ type: ‘text‘ },{ type: ‘text‘ },{ type: ‘text‘ },
{ type: ‘text‘ }
]
});
};
fileReader.readAsBinaryString(files[0]);
});
/*卡bin预览结束*/
 

js 实现的excel解析和预览

标签:cas   按钮   element   方式   plugin   margin   targe   top   binary   

原文地址:https://www.cnblogs.com/zjm-1/p/12206992.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!