<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>excel</title>
|
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
|
<link rel='stylesheet' href='../../static/plugins/css/pluginsCss.css'/>
|
<link rel='stylesheet' href='../../static/plugins/plugins.css'/>
|
<link rel='stylesheet' href='../../static/css/luckysheet.css'/>
|
<link rel='stylesheet' href='../../static/assets/iconfont/iconfont.css'/>
|
<script src="../../static/js/luckysheet_js/plugin.js"></script>
|
<script src="../../static/js/luckysheet_js/luckysheet.umd.js"></script>
|
<script src="../../static/js/luckysheet_js/luckyexcel.umd.js"></script>
|
<script src="../../static/js/luckysheet_js/exceljs.min.js"></script>
|
<script type="text/javascript" src="../../static/js/luckysheet_js/export.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/luckysheet_js/pako.es5.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/luckysheet_js/base64.min.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/luckysheet_js/print.min.js" charset="utf-8"></script>
|
</head>
|
<body>
|
<div style="display: flex;position: absolute;top: 20px;left:30px;z-index: 9999;">
|
<!-- <div><button type="button" id="export">导出Execel</button></div>-->
|
<!-- <div><button type="button" id="save">保存到服务器</button></div>-->
|
<!-- <div><button type="button" id="otherSave">另保存到服务器</button></div>-->
|
<div>
|
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs btn-edit" id="allprint">全部打印</button>
|
</div>
|
<div>
|
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs btn-edit" id="print">选区打印</button>
|
</div>
|
<div>
|
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs btn-edit" id="download">下载</button>
|
</div>
|
</div>
|
<div id="luckysheet"
|
style="margin:0px;padding:0px;position:absolute;width:100%;height: 100vh;left: 0px;top: 0px;"></div>
|
<script>
|
$(function () {
|
var layer = layui.layer;
|
|
//配置项
|
var options = {
|
container: 'luckysheet',//luckysheet为容器id
|
title: '查看询价', //工作簿名称
|
lang: 'zh', //设定表格语言 国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")
|
allowEdit: true, //是否允许前台编辑
|
sheetFormulaBar: true, //是否显示公式栏
|
forceCalculation: true,//强制计算公式
|
myFolderUrl: '' //左上角<返回按钮的链接
|
}
|
|
let checkDataFile = "";
|
|
if (getUrlParams('id') == false || getUrlParams('id') == undefined) {
|
//新增
|
luckysheet.create(options)
|
$("#luckysheet_info_detail_update").hide()
|
$("#luckysheet_info_detail_save").hide()
|
$("#luckysheet_info_detail_title").hide()
|
} else {
|
//修改
|
$.ajax({
|
type: "get",
|
url: baseUrl + "/priOnline2/viewCheck/" + getUrlParams('id') + "/auth",
|
dataType: "json",
|
headers: {'token': localStorage.getItem('token')},
|
success: function (res) {
|
if (res.code == 200) {
|
checkDataFile = res.data.checkDataFile
|
options.data = unzip(res.data.checkData)
|
luckysheet.create(options)
|
$("#luckysheet_info_detail_update").hide()
|
$("#luckysheet_info_detail_save").hide()
|
$("#luckysheet_info_detail_title").hide()
|
} else {
|
layer.msg(res.msg, {time: 1000})
|
}
|
}
|
});
|
|
}
|
|
$("#export").on("click", () => {
|
console.log('export')
|
exportExcel(luckysheet.getluckysheetfile()).then((e) => {
|
saveFile(e, 'file');
|
})
|
})
|
|
//保存到服务器
|
$("#save").on("click", () => {
|
if (getUrlParams('id') == false || getUrlParams('id') == undefined) {
|
//新增
|
$.ajax({
|
url: baseUrl + "/priOnline2/add/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: JSON.stringify({
|
title: luckysheet.toJson().title,
|
sheetData: zip(luckysheet.getAllSheets()),
|
itemId: getUrlParams('item_id'),
|
priId: getUrlParams('pri_id')
|
}),
|
method: 'POST',
|
dataType: "json",
|
contentType: 'application/json;charset=UTF-8',
|
success: function (res) {
|
if (res.code == 200) {
|
layer.msg('保存成功', {time: 1000}, () => {
|
parent.location.reload()
|
})
|
} else {
|
layer.msg(res.msg, {time: 1000})
|
}
|
}
|
})
|
} else {
|
//修改
|
$.ajax({
|
url: baseUrl + "/priOnline2/update/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: JSON.stringify({
|
id: getUrlParams('id'),
|
title: luckysheet.toJson().title,
|
sheetData: zip(luckysheet.getAllSheets())
|
}),
|
method: 'POST',
|
dataType: "json",
|
contentType: 'application/json;charset=UTF-8',
|
success: function (res) {
|
if (res.code == 200) {
|
layer.msg('保存成功', {time: 1000}, () => {
|
parent.location.reload()
|
})
|
} else {
|
layer.msg(res.msg, {time: 1000})
|
}
|
}
|
})
|
}
|
})
|
|
$("#download").on("click", () => {
|
window.open(baseUrl + "/priOnline2/checkDataDownload/" + checkDataFile)
|
})
|
|
})
|
|
$("#allprint").on("click", () => {
|
printExcel()
|
})
|
|
$("#print").on("click", () => {
|
let src = luckysheet.getScreenshot(); // 生成base64图片
|
const style = '@page {margin:0 10mm};'
|
printJS({
|
printable: src,
|
type: 'image',
|
style: style
|
}) // Print.js插件
|
})
|
|
// 获取表格中包含内容的row，column
|
function getExcelRowColumn() {
|
const sheetData = luckysheet.getSheetData();
|
let objRowColumn = {
|
row: [null, null], //行
|
column: [null, null], //列
|
};
|
sheetData.forEach((item, index) => {
|
//行数
|
item.forEach((it, itemIndex) => {
|
if (it !== null) {
|
if (objRowColumn.row[0] == null) objRowColumn.row[0] = index; // row第一位
|
objRowColumn.row[1] = index; //row第二位
|
if (objRowColumn.column[0] == null)
|
objRowColumn.column[0] = itemIndex; //column第一位
|
objRowColumn.column[1] = itemIndex; //column第二位
|
}
|
});
|
});
|
return objRowColumn;
|
}
|
|
function printExcel() {
|
let RowColumn = this.getExcelRowColumn() // 获取有值的行和列
|
RowColumn.column[0] = 0 //因需要打印左边的边框，需重新设置
|
luckysheet.setRangeShow(RowColumn) // 进行选区操作
|
let src = luckysheet.getScreenshot(); // 生成base64图片
|
const style = '@page {margin:0 10mm};'
|
printJS({
|
printable: src,
|
type: 'image',
|
style: style
|
}) // Print.js插件
|
}
|
|
function getUrlParams(name) {
|
var url = window.location.search;
|
if (url.indexOf('?') == -1) {
|
return false;
|
}
|
url = url.substr(1);
|
url = url.split('&');
|
var name = name || '';
|
var nameres;
|
for (var i = 0; i < url.length; i++) {
|
var info = url[i].split('=');
|
var obj = {};
|
obj[info[0]] = decodeURI(info[1]);
|
url[i] = obj;
|
}
|
if (name) {
|
for (var i = 0; i < url.length; i++) {
|
for (var key in url[i]) {
|
if (key == name) {
|
nameres = url[i][key];
|
}
|
}
|
}
|
} else {
|
nameres = url;
|
}
|
return nameres;
|
}
|
|
// 压缩
|
function zip(data) {
|
if (!data) return data
|
// 判断数据是否需要转为JSON
|
const dataJson = typeof data !== 'string' && typeof data !== 'number' ? JSON.stringify(data) : data
|
|
// 使用Base64.encode处理字符编码，兼容中文
|
const str = Base64.encode(dataJson)
|
let binaryString = pako.gzip(str);
|
let arr = Array.from(binaryString);
|
let s = "";
|
arr.forEach((item, index) => {
|
s += String.fromCharCode(item)
|
})
|
return btoa(s)
|
}
|
|
// 解压
|
function unzip(b64Data) {
|
let strData = atob(b64Data);
|
let charData = strData.split('').map(function (x) {
|
return x.charCodeAt(0);
|
});
|
let binData = new Uint8Array(charData);
|
let data = pako.ungzip(binData);
|
|
// ↓切片处理数据，防止内存溢出报错↓
|
let str = '';
|
const chunk = 8 * 1024
|
let i;
|
for (i = 0; i < data.length / chunk; i++) {
|
str += String.fromCharCode.apply(null, data.slice(i * chunk, (i + 1) * chunk));
|
}
|
str += String.fromCharCode.apply(null, data.slice(i * chunk));
|
// ↑切片处理数据，防止内存溢出报错↑
|
|
const unzipStr = Base64.decode(str);
|
let result = ''
|
|
// 对象或数组进行JSON转换
|
try {
|
result = JSON.parse(unzipStr)
|
} catch (error) {
|
if (/Unexpected token o in JSON at position 0/.test(error)) {
|
// 如果没有转换成功，代表值为基本数据，直接赋值
|
result = unzipStr
|
}
|
}
|
return result
|
}
|
</script>
|
</body>
|
</html>
|
