Skip to content

K
kd_control
Commit 5793e3cf authored by zhanglw's avatar zhanglw
Browse files
Options

excel在线编辑样式

parent ba093436
Show whitespace changes
Inline Side-by-side
Showing with 763 additions and 32 deletions
src/views/productionPlanManagement/mineFile/excelSpreadSheet.vue 0 → 100644
View file @ 5793e3cf
<template>
<div ref="sheetContainer" v-bind:id="sheetContainerId" class="grid"></div>
</template>
<script>
import Spreadsheet from "x-data-spreadsheet";
import zhCN from "x-data-spreadsheet/src/locale/zh-cn";
import _ from "lodash";
import Excel from "exceljs";
import tinycolor from "tinycolor2";
export default {
name: "excelSpreadSheet",
props: {
ColumnCount: {
type: Number,
default: () => 50,
},
ColumnWidth: {
type: Number,
default: () => 100,
},
RowCount: {
type: Number,
default: () => 9999,
},
SheetName: {
type: String,
default: () => [],
},
Headers: {
type: Array,
default: () => [],
},
Records: {
type: Array,
default: () => [],
},
/*表头样式*/
HeaderStyle: {
type: Object,
default: () => {
return {
//bgcolor: "#f4f5f8",
textwrap: true,
color: "#900b09",
align: "center",
valign: "middle",
border: {
top: ["thin", "#1E1E1E"],
bottom: ["thin", "#1E1E1E"],
right: ["thin", "#1E1E1E"],
left: ["thin", "#1E1E1E"],
},
font: {
bold: true,
},
};
},
},
/*表体样式*/
RecordStyle: {
type: Object,
default: () => {
return {
//bgcolor: "#f4f5f8",
textwrap: true,
color: "#900b09",
align: "left",
valign: "middle",
border: {
top: ["thin", "#1E1E1E"],
bottom: ["thin", "#1E1E1E"],
right: ["thin", "#1E1E1E"],
left: ["thin", "#1E1E1E"],
},
font: {
bold: false,
},
};
},
},
File: {
type: null,
default: () => null,
},
ExportJsonProperties: {
type: Array,
default: () => [],
},
},
data() {
return {
xs: null,
sheetContainerId: 'sheetContainerId_101',
DataSource: []
};
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
watch: {
File: {
handler(newV, oldV) {
this.$nextTick(() => {
this.loadExcelFile(newV);
});
},
},
Headers: {
deep: true,
handler(newV) {
let result = [];
if (Array.isArray(newV) && newV.length > 0) {
let headerRow = {cells: []};
for (let i = 0; i < newV.length; i++) {
headerRow.cells.push({
text: newV[i],
editable: false,
style: 0,
});
}
result.push(headerRow);
}
if (Array.isArray(this.Records) && this.Records.length > 0) {
for (let i = 0; i < this.Records.length; i++) {
let recordRow = {cells: []};
if (JSON.stringify(this.Records[i]) != "{}") {
for (let k = 0; k < this.ExportJsonProperties.length; k++) {
recordRow.cells.push({
text: this.Records[i][this.ExportJsonProperties[k]] + "",
editable: true,
style: 1,
});
}
} else {
for (let i = 0; i < this.ColumnCount; i++) {
recordRow.cells.push({
text: "",
editable: true,
style: 1,
});
}
}
result.push(recordRow);
}
}
this.DataSource = result;
},
},
Records: {
deep: true,
handler(newV) {
let result = [];
if (Array.isArray(this.Headers) && this.Headers.length > 0) {
let headerRow = {cells: []};
for (let i = 0; i < this.Headers.length; i++) {
headerRow.cells.push({
text: this.Headers[i],
editable: false,
style: 0,
});
}
result.push(headerRow);
}
if (Array.isArray(newV) && newV.length > 0) {
for (let i = 0; i < newV.length; i++) {
let recordRow = {cells: []};
if (JSON.stringify(newV[i]) != "{}") {
for (let k = 0; k < this.ExportJsonProperties.length; k++) {
recordRow.cells.push({
text: newV[i][this.ExportJsonProperties[k]] + "",
editable: true,
style: 1,
});
}
} else {
for (let i = 0; i < this.ColumnCount; i++) {
recordRow.cells.push({
text: "",
editable: true,
style: 1,
});
}
}
result.push(recordRow);
}
}
this.DataSource = result;
}
},
DataSource: {
deep: true,
handler(newW) {
if (this.xs) {
this.xs.loadData([
{
name: this.SheetName,
styles: [this.HeaderStyle, this.RecordStyle],
rows: newW,
},
]);
}
}
}
},
methods: {
// 初始化
init() {
if (this.$refs.sheetContainer && this.$refs.sheetContainer.offsetHeight && this.$refs.sheetContainer.offsetWidth) {
//设置中文
Spreadsheet.locale("zh-cn", zhCN);
this.xs = new Spreadsheet(
document.getElementById(this.sheetContainerId),
{
mode: "edit",
showToolbar: true,
showGrid: true,
showContextmenu: true,
showBottomBar: true,
view: {
height: () =>
this.$refs.sheetContainer &&
this.$refs.sheetContainer.offsetHeight &&
_.isNumber(this.$refs.sheetContainer.offsetHeight)
? this.$refs.sheetContainer.offsetHeight
: 0,
width: () =>
this.$refs.sheetContainer &&
this.$refs.sheetContainer.offsetWidth &&
_.isNumber(this.$refs.sheetContainer.offsetWidth)
? this.$refs.sheetContainer.offsetWidth
: 0,
},
formats: [],
fonts: [],
formula: [],
row: {
len: this.RowCount,
height: 25,
},
col: {
len: this.ColumnCount,
width: this.ColumnWidth,
indexWidth: 60,
minWidth: 60,
},
}
);
this.loadData();
}
},
loadData() {
if (this.xs) {
this.xs.loadData([
{
name: this.SheetName,
styles: [this.HeaderStyle, this.RecordStyle],
rows: this.DataSource,
},
]);
}
},
// 将exceljsWorkbook结构体提组装成x-data-spreadsheet结构体
dataEjstoXs(workbook) {
let workbookData = [];
workbook.eachSheet((sheet, sheetIndex) => {
if (!sheet.columns) {
return
}
// 构造x-data-spreadsheet 的 sheet 数据源结构
let sheetData = {
name: sheet.name,
styles: [],
rows: {},
merges: [],
};
// 收集合并单元格信息
let mergeAddressData = [];
for (let mergeRange in sheet._merges) {
sheetData.merges.push(sheet._merges[mergeRange].shortRange);
let mergeAddress = {};
// 合并单元格起始地址
mergeAddress.startAddress = sheet._merges[mergeRange].tl;
// 合并单元格终止地址
mergeAddress.endAddress = sheet._merges[mergeRange].br;
// Y轴方向跨度
mergeAddress.YRange =
sheet._merges[mergeRange].model.bottom -
sheet._merges[mergeRange].model.top;
// X轴方向跨度
mergeAddress.XRange =
sheet._merges[mergeRange].model.right -
sheet._merges[mergeRange].model.left;
mergeAddressData.push(mergeAddress);
}
// 设置列宽
sheetData.cols = {};
for (let i = 0; i < sheet.columns.length; i++) {
sheetData.cols[i.toString()] = {};
if (sheet.columns[i].width) {
// 读取宽度
sheetData.cols[i.toString()].width =
sheet.columns[i].width * 8;
} else {
// 默认列宽
sheetData.cols[i.toString()].width = 100;
}
}
// 遍历行
sheet.eachRow((row, rowIndex) => {
sheetData.rows[(rowIndex - 1).toString()] = {cells: {}};
//includeEmpty = false 不包含空白单元格
row.eachCell(
{includeEmpty: true},
function (cell, colNumber) {
let cellText = "";
if (cell.value && cell.value.result) {
// Excel 单元格有公式
cellText = cell.value.result;
} else if (cell.value && cell.value.richText) {
// Excel 单元格是多行文本
for (let text in cell.value.richText) {
// 多行文本做累加
cellText += cell.value.richText[text].text;
}
} else {
// Excel 单元格无公式
cellText = cell.value;
}
//解析单元格,包含样式
//*********************单元格存在背景色******************************
// 单元格存在背景色
let backGroundColor = null;
if (cell.style.fill && cell.style.fill.fgColor && cell.style.fill.fgColor.argb) {
// 8位字符颜色先转rgb再转16进制颜色
backGroundColor = ((val) => {
val = val.trim().toLowerCase(); //去掉前后空格
let color = {};
try {
let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(val);
color.r = parseInt(argb[2], 16);
color.g = parseInt(argb[3], 16);
color.b = parseInt(argb[4], 16);
color.a = parseInt(argb[1], 16) / 255;
return tinycolor(
`rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
).toHexString();
} catch (e) {
console.log(e);
}
})(cell.style.fill.fgColor.argb);
}
if (backGroundColor) {
cell.style.bgcolor = backGroundColor;
}
//*************************************************************************** */
//*********************字体存在背景色******************************
// 字体颜色
let fontColor = null;
if (cell.style.font && cell.style.font.color && cell.style.font.color.argb) {
// 8位字符颜色先转rgb再转16进制颜色
fontColor = ((val) => {
val = val.trim().toLowerCase(); //去掉前后空格
let color = {};
try {
let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(val);
color.r = parseInt(argb[2], 16);
color.g = parseInt(argb[3], 16);
color.b = parseInt(argb[4], 16);
color.a = parseInt(argb[1], 16) / 255;
return tinycolor(
`rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
).toHexString();
} catch (e) {
console.log(e);
}
})(cell.style.font.color.argb);
}
if (fontColor) {
cell.style.color = fontColor;
}
//************************************************************************ */
// exceljs 对齐的格式转成 x-date-spreedsheet 能识别的对齐格式
if (cell.style.alignment && cell.style.alignment.horizontal) {
cell.style.align = cell.style.alignment.horizontal
}
if (cell.style.alignment && cell.style.alignment.vertical) {
cell.style.valign = cell.style.alignment.vertical
}
//处理合并单元格
let mergeAddress = _.find(mergeAddressData, function (o) {
return o.startAddress == cell._address;
});
if (mergeAddress) {
// 遍历的单元格属于合并单元格
if (cell.master.address != mergeAddress.startAddress) {
// 不是合并单元格中的第一个单元格不需要计入数据源
return;
}
// 说明是合并单元格区域的起始单元格
sheetData.rows[(rowIndex - 1).toString()].cells[(colNumber - 1).toString()] = {
text: cellText === 0 ? '0' : cellText,
style: 0,
merge: [mergeAddress.YRange, mergeAddress.XRange],
};
//解析单元格,包含样式
let xsCellStyle = _.cloneDeep(cell.style);
xsCellStyle.border = {};
// 边框线
if (
cell.style.border &&
JSON.stringify(cell.style.border) != "{}"
) {
let coloneStyle = cell.style.border;
xsCellStyle.border = {};
if (coloneStyle.bottom) {
xsCellStyle.border.bottom = [];
xsCellStyle.border.bottom[0] =
coloneStyle.bottom.style;
if (_.isString(coloneStyle.bottom.color)) {
xsCellStyle.border.bottom[1] =
coloneStyle.bottom.color;
} else {
xsCellStyle.border.bottom[1] = "#000000";
}
}
if (coloneStyle.right) {
xsCellStyle.border.right = [];
xsCellStyle.border.right[0] = coloneStyle.right.style;
if (_.isString(coloneStyle.right.color)) {
xsCellStyle.border.right[1] =
coloneStyle.right.color;
} else {
xsCellStyle.border.right[1] = "#000000";
}
}
if (coloneStyle.left) {
xsCellStyle.border.left = [];
xsCellStyle.border.left[0] = coloneStyle.left.style;
if (_.isString(coloneStyle.left.color)) {
xsCellStyle.border.left[1] = coloneStyle.left.color;
} else {
xsCellStyle.border.left[1] = "#000000";
}
}
if (coloneStyle.top) {
xsCellStyle.border.top = [];
xsCellStyle.border.top[0] = coloneStyle.top.style;
if (_.isString(coloneStyle.top.color)) {
xsCellStyle.border.top[1] = coloneStyle.top.color;
} else {
xsCellStyle.border.top[1] = "#000000";
}
}
}
sheetData.styles.push(xsCellStyle);
//对应的style存放序号
sheetData.rows[(rowIndex - 1).toString()].cells[
(colNumber - 1).toString()
].style = sheetData.styles.length - 1;
} else {
// 非合并单元格
sheetData.rows[(rowIndex - 1).toString()].cells[(colNumber - 1).toString()] = {text: cellText === 0 ? '0' : cellText, style: 0};
//解析单元格,包含样式
let xsCellStyle = _.cloneDeep(cell.style);
xsCellStyle.border = {};
// 边框线
if (cell.style.border && JSON.stringify(cell.style.border) != "{}") {
let coloneStyle = cell.style.border;
xsCellStyle.border = {};
if (coloneStyle.bottom) {
xsCellStyle.border.bottom = [];
xsCellStyle.border.bottom[0] = coloneStyle.bottom.style;
if (_.isString(coloneStyle.bottom.color)) {
xsCellStyle.border.bottom[1] = coloneStyle.bottom.color;
} else {
xsCellStyle.border.bottom[1] = "#000000";
}
}
if (coloneStyle.right) {
xsCellStyle.border.right = [];
xsCellStyle.border.right[0] = coloneStyle.right.style;
if (_.isString(coloneStyle.right.color)) {
xsCellStyle.border.right[1] = coloneStyle.right.color;
} else {
xsCellStyle.border.right[1] = "#000000";
}
}
if (coloneStyle.left) {
xsCellStyle.border.left = [];
xsCellStyle.border.left[0] = coloneStyle.left.style;
if (_.isString(coloneStyle.left.color)) {
xsCellStyle.border.left[1] = coloneStyle.left.color;
} else {
xsCellStyle.border.left[1] = "#000000";
}
}
if (coloneStyle.top) {
xsCellStyle.border.top = [];
xsCellStyle.border.top[0] = coloneStyle.top.style;
if (_.isString(coloneStyle.top.color)) {
xsCellStyle.border.top[1] = coloneStyle.top.color;
} else {
xsCellStyle.border.top[1] = "#000000";
}
}
}
sheetData.styles.push(xsCellStyle);
//对应的style存放序号
sheetData.rows[(rowIndex - 1).toString()].cells[(colNumber - 1).toString()].style = sheetData.styles.length - 1;
}
}
);
});
workbookData.push(sheetData);
});
return workbookData
},
// 导入excel文件
loadExcelFile(file) {
if (file) {
const wb = new Excel.Workbook();
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => {
const buffer = reader.result;
wb.xlsx.load(buffer).then((workbook) => {
this.xs.loadData(this.dataEjstoXs(workbook));
});
};
}
},
// 导入excel文件流
loadExcelFileStream(buffer) {
if (buffer) {
const wb = new Excel.Workbook();
wb.xlsx.load(buffer).then((workbook) => {
this.xs.loadData(this.dataEjstoXs(workbook));
});
}
},
// 将x-data-spreadsheet结构提组装成exceljsWorkbook结构体
dataXstoEjs(){
const exceljsWorkbook = new Excel.Workbook();
exceljsWorkbook.modified = new Date();
this.xs.getData().forEach(function (xws) {
let rowobj = xws.rows;
// 构造exceljs文档结构
const exceljsSheet = exceljsWorkbook.addWorksheet(xws.name);
// 读取列宽
let sheetColumns = [];
let colIndex = 0;
for (let col in xws.cols) {
if (xws.cols[col].width) {
sheetColumns.push({
header: colIndex + "",
key: colIndex + "",
width: xws.cols[col].width / 8,
});
}
colIndex++;
}
exceljsSheet.columns = sheetColumns;
for (let ri = 0; ri < rowobj.len; ++ri) {
let row = rowobj[ri];
if (!row) continue;
// 构造exceljs的行(如果尚不存在，则将返回一个新的空对象)
const exceljsRow = exceljsSheet.getRow(ri + 1);
Object.keys(row.cells).forEach(function (k) {
let idx = +k;
if (isNaN(idx)) return;
const exceljsCell = exceljsRow.getCell(Number(k) + 1);
exceljsCell.value = row.cells[k].text;
// 对齐
if (xws.styles[row.cells[k].style]) {
// 垂直对齐方式
if (xws.styles[row.cells[k].style].valign) {
if (exceljsCell.alignment == undefined || exceljsCell.alignment == null) {
exceljsCell.alignment = {};
}
exceljsCell.alignment.vertical = xws.styles[row.cells[k].style].valign;
}
// 水平对齐方式
if (xws.styles[row.cells[k].style].align) {
if (exceljsCell.alignment == undefined || exceljsCell.alignment == null) {
exceljsCell.alignment = {};
}
exceljsCell.alignment.horizontal = xws.styles[row.cells[k].style].align;
}
}
// 边框
if (JSON.stringify(xws.styles[row.cells[k].style]) !== "{}" && JSON.stringify(xws.styles[row.cells[k].style].border) !== "{}") {
exceljsCell.border = {};
// bottom
if (xws.styles[row.cells[k].style].border.bottom && Array.isArray(xws.styles[row.cells[k].style].border.bottom) && xws.styles[row.cells[k].style].border.bottom.length === 2) {
exceljsCell.border.bottom = {};
exceljsCell.border.bottom.style = xws.styles[row.cells[k].style].border.bottom[0];
exceljsCell.border.bottom.color = {};
exceljsCell.border.bottom.color = xws.styles[row.cells[k].style].border.bottom[1];
}
// left
if (xws.styles[row.cells[k].style].border.left && Array.isArray(xws.styles[row.cells[k].style].border.left) && xws.styles[row.cells[k].style].border.left.length === 2) {
exceljsCell.border.left = {};
exceljsCell.border.left.style = xws.styles[row.cells[k].style].border.left[0];
exceljsCell.border.left.color = {};
exceljsCell.border.left.color = xws.styles[row.cells[k].style].border.left[1];
}
// right
if (xws.styles[row.cells[k].style].border.right && Array.isArray(xws.styles[row.cells[k].style].border.right) && xws.styles[row.cells[k].style].border.right.length === 2) {
exceljsCell.border.right = {};
exceljsCell.border.right.style = xws.styles[row.cells[k].style].border.right[0];
exceljsCell.border.right.color = {};
exceljsCell.border.right.color = xws.styles[row.cells[k].style].border.right[1];
}
// top
if (xws.styles[row.cells[k].style].border.top && Array.isArray(xws.styles[row.cells[k].style].border.top) && xws.styles[row.cells[k].style].border.top.length === 2) {
exceljsCell.border.top = {};
exceljsCell.border.top.style = xws.styles[row.cells[k].style].border.top[0];
exceljsCell.border.top.color = {};
exceljsCell.border.top.color = xws.styles[row.cells[k].style].border.top[1];
}
}
// 背景色
if (xws.styles[row.cells[k].style].bgcolor) {
let rgb = tinycolor(xws.styles[row.cells[k].style].bgcolor).toRgb();
let rHex = parseInt(rgb.r).toString(16).padStart(2, "0");
let gHex = parseInt(rgb.g).toString(16).padStart(2, "0");
let bHex = parseInt(rgb.b).toString(16).padStart(2, "0");
let aHex = parseInt(rgb.a).toString(16).padStart(2, "0");
let _bgColor = aHex + rHex + gHex + bHex;
// 设置exceljs背景色
exceljsCell.fill = {
type: "pattern",
pattern: "solid",
fgColor: {argb: _bgColor},
};
}
// 字体
exceljsCell.font = xws.styles[row.cells[k].style].font;
// 字体颜色
if (xws.styles[row.cells[k].style].color) {
let rgb = tinycolor(xws.styles[row.cells[k].style].color).toRgb();
let rHex = parseInt(rgb.r).toString(16).padStart(2, "0");
let gHex = parseInt(rgb.g).toString(16).padStart(2, "0");
let bHex = parseInt(rgb.b).toString(16).padStart(2, "0");
let aHex = parseInt(rgb.a).toString(16).padStart(2, "0");
let _fontColor = aHex + rHex + gHex + bHex;
exceljsCell.font.color = {argb: _fontColor};
}
// 合并单元格
if (row.cells[k].merge) {
// 开始行
let startRow = ri + 1;
// 结束行,加上Y轴跨度
let endRow = startRow + row.cells[k].merge[0];
// 开始列
let startColumn = Number(k) + 1;
// 结束列,加上X轴跨度
let endColumn = startColumn + row.cells[k].merge[1];
// 按开始行，开始列，结束行，结束列合并
exceljsSheet.mergeCells(startRow, startColumn, endRow, endColumn);
}
});
}
});
return exceljsWorkbook;
},
// 导出excel文件,
exportExcel(fileName) {
const exceljsWorkbook = this.dataXstoEjs()
// writeBuffer 把写好的excel 转换成 ArrayBuffer 类型
exceljsWorkbook.xlsx.writeBuffer().then((data) => {
const link = document.createElement("a");
// Blob 实现下载excel
const blob = new Blob([data], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
});
link.href = window.URL.createObjectURL(blob);
link.download = `${fileName}.xlsx`;
link.click();
});
},
// 导出json
exportJson() {
let sheetsData = this.xs.getData();
let rows = Object.entries(sheetsData[0].rows);
let jsonData = [];
if (Array.isArray(this.ExportJsonProperties) && this.ExportJsonProperties.length > 0) {
// 遍历数据，跳过第一行表头
for (let i = 1; i < rows.length; i++) {
if (rows[i] && rows[i][1] && rows[i][1].cells) {
let row = Object.entries(rows[i][1].cells);
// 构造行对象
let JsonRow = {};
for (let k = 0; k < row.length; k++) {
let cells = row[k];
JsonRow[this.ExportJsonProperties[k]] = cells[1].text;
}
jsonData.push(JsonRow);
}
}
}
return jsonData;
},
},
destroyed() {
},
};
</script>
src/views/productionPlanManagement/mineFile/index.vue
View file @ 5793e3cf
...@@ -62,7 +62,8 @@ ...@@ -62,7 +62,8 @@
<!-- 表单渲染 --> <!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" :title="openFile.fileName" width="1600px" top="1vh"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" :title="openFile.fileName" width="1600px" top="1vh">
<div v-if="openFile.isLoading" style="width: 100%;text-align: center">正在读取文件...</div> <div v-if="openFile.isLoading" style="width: 100%;text-align: center">正在读取文件...</div>
<div id="x-spreadsheet-excel"></div> <!-- <div id="x-spreadsheet-excel"></div>-->
<excel-spread-sheet ref="ExcelSpreadSheet" SheetName="sheet1" :ColumnWidth="300" style="width:100%;height:80vh"></excel-spread-sheet>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button @click="cancelForm">关闭</el-button> <el-button @click="cancelForm">关闭</el-button>
<el-button type="primary" @click="updataEcxel">保存</el-button> <el-button type="primary" @click="updataEcxel">保存</el-button>
...@@ -118,11 +119,14 @@ import Spreadsheet from "x-data-spreadsheet"; ...@@ -118,11 +119,14 @@ import Spreadsheet from "x-data-spreadsheet";
import 'x-data-spreadsheet/dist/locale/zh-cn'; import 'x-data-spreadsheet/dist/locale/zh-cn';
import {Tools, HttpReq, Dates} from '@/assets/js/common.js'; import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import ExcelSpreadSheet from "./excelSpreadSheet.vue";
export default { export default {
name: 'visitPeople', components: { ExcelSpreadSheet },
name: 'mineFile',
data() { data() {
return { return {
colors: [{color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100}],
title: '', title: '',
fileUploadApi: '', fileUploadApi: '',
headers: {'Authorization': getToken()}, headers: {'Authorization': getToken()},
...@@ -138,7 +142,7 @@ export default { ...@@ -138,7 +142,7 @@ export default {
total: 0, total: 0,
tableData: [], tableData: [],
openFile: { openFile: {
fileName: '', fileName: 'excel',
isLoading: false, isLoading: false,
percentage: 0 percentage: 0
}, },
...@@ -157,6 +161,9 @@ export default { ...@@ -157,6 +161,9 @@ export default {
}) })
}, },
methods: { methods: {
loadExcelFile(e) {
this.file = e.target.files[0]
},
openLog(item) { openLog(item) {
this.logVisible = true this.logVisible = true
HttpReq.truckDispatching.scQueryByUrl({url:item.url}).then((res) => { HttpReq.truckDispatching.scQueryByUrl({url:item.url}).then((res) => {
...@@ -272,9 +279,22 @@ export default { ...@@ -272,9 +279,22 @@ export default {
reader.readAsArrayBuffer(blob); reader.readAsArrayBuffer(blob);
}); });
}, },
arrayBufferToBase64(buffer) {
let binary = '';
let bytes = new Uint8Array( buffer );
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
},
updataEcxel() { updataEcxel() {
const exceljsWorkbook = this.$refs.ExcelSpreadSheet.dataXstoEjs()
exceljsWorkbook.xlsx.writeBuffer().then((buffer) => {
// 将ArrayBuffer转换为Base64字符串
const base64 = this.arrayBufferToBase64(buffer);
HttpReq.truckDispatching.scUploadExcelByBase64({ HttpReq.truckDispatching.scUploadExcelByBase64({
base64: XLSX.write(this.xtos(this.xs.getData()), {bookType: 'xlsx', type: 'base64'}), base64: base64,
url: this.openFile.url url: this.openFile.url
}).then((res) => { }).then((res) => {
this.$notify({ this.$notify({
...@@ -286,6 +306,7 @@ export default { ...@@ -286,6 +306,7 @@ export default {
this.cancelForm() this.cancelForm()
} }
}) })
});
}, },
viewTable(item) { viewTable(item) {
this.openFile = item this.openFile = item
...@@ -304,23 +325,8 @@ export default { ...@@ -304,23 +325,8 @@ export default {
this.reconnect(); this.reconnect();
}, 15000); }, 15000);
HttpReq.truckDispatching.downloadExcelOrFbx({url: item.url, type: this.query.type}).then((res) => { HttpReq.truckDispatching.downloadExcelOrFbx({url: item.url, type: this.query.type}).then((res) => {
if(!this.xs){
Spreadsheet.locale('zh-cn');
this.xs = new Spreadsheet("#x-spreadsheet-excel", {
view:{
width: () =>{return 1600},
height: () =>{return 800}
},
style: {
align: 'center',
valign: 'middle',
}
})
}
this.blobToArrayBuffer(res).then(arrayBuffer => { this.blobToArrayBuffer(res).then(arrayBuffer => {
// 外部引用sheetjs提供全局变量XLSX this.$refs.ExcelSpreadSheet.loadExcelFileStream(arrayBuffer)
let wb = XLSX.read(arrayBuffer)
this.xs.loadData(this.stox(wb))
}) })
}) })
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment