excel 预览集成
This commit is contained in:
parent
f608409698
commit
9c4c2f1f28
|
|
@ -26,6 +26,7 @@
|
|||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"@vue-office/docx": "^1.6.3",
|
||||
"@vue-office/excel": "^1.7.14",
|
||||
"@vue/composition-api": "^1.7.2",
|
||||
"axios": "0.28.1",
|
||||
"clipboard": "2.0.8",
|
||||
|
|
@ -40,8 +41,11 @@
|
|||
"js-beautify": "1.13.0",
|
||||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"jquery": "^3.6.0",
|
||||
"jquery-mousewheel": "^3.1.13",
|
||||
"jszip": "^3.10.1",
|
||||
"lodash": "^4.17.21",
|
||||
"luckysheet": "^2.1.13",
|
||||
"mammoth": "^1.11.0",
|
||||
"nprogress": "0.2.0",
|
||||
"pdfjs-dist": "^2.16.105",
|
||||
|
|
@ -58,7 +62,8 @@
|
|||
"vue-pdf": "^4.3.0",
|
||||
"vue-router": "3.4.9",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.6.0"
|
||||
"vuex": "3.6.0",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "4.4.6",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ import Vue from 'vue'
|
|||
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
// 全局引入 jQuery，Luckysheet 需要它
|
||||
import $ from 'jquery'
|
||||
window.$ = window.jQuery = $
|
||||
|
||||
import Element from 'element-ui'
|
||||
import './assets/styles/element-variables.scss'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,399 @@
|
|||
<template>
|
||||
<div>Excel文档查看</div>
|
||||
<div class="document-excel">
|
||||
<div class="viewer-container">
|
||||
<div id="luckysheet" class="excel-wrapper"></div>
|
||||
<div v-if="loading" class="overlay state-panel">
|
||||
<i class="el-icon-loading state-icon"></i>
|
||||
<p>正在加载 Excel 文档，请稍候...</p>
|
||||
</div>
|
||||
<div v-else-if="error" class="overlay state-panel">
|
||||
<i class="el-icon-warning-outline state-icon"></i>
|
||||
<p>{{ error }}</p>
|
||||
<el-button type="primary" @click="reload">重新加载</el-button>
|
||||
</div>
|
||||
<div v-else-if="!excelUrl" class="overlay state-panel">
|
||||
<i class="el-icon-document state-icon"></i>
|
||||
<p>暂未指定 Excel 文件，请通过路由参数 url 传入文件地址。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import 'jquery-mousewheel'
|
||||
import LuckySheet from 'luckysheet'
|
||||
import * as XLSX from 'xlsx'
|
||||
import 'luckysheet/dist/plugins/css/pluginsCss.css'
|
||||
import 'luckysheet/dist/plugins/plugins.css'
|
||||
import 'luckysheet/dist/css/luckysheet.css'
|
||||
import 'luckysheet/dist/assets/iconfont/iconfont.css'
|
||||
|
||||
const DEFAULT_EXCEL_URL = 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/12/928206a2fdc74c349781f441d9c010f8.xlsx'
|
||||
|
||||
export default {
|
||||
name: 'DocumentExcel',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
error: null,
|
||||
excelUrl: null,
|
||||
workbook: null,
|
||||
luckySheetInstance: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
routeExcelUrl() {
|
||||
return this.$route.query.url || this.$route.params.url;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
routeExcelUrl: {
|
||||
immediate: true,
|
||||
handler(newUrl) {
|
||||
if (newUrl) {
|
||||
this.excelUrl = newUrl;
|
||||
this.loadExcel();
|
||||
} else {
|
||||
// 如果没有传入URL，使用默认URL
|
||||
this.excelUrl = DEFAULT_EXCEL_URL;
|
||||
this.loadExcel();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 容器元素在模板中始终存在，无需额外初始化
|
||||
},
|
||||
beforeUnmount() {
|
||||
// 组件销毁时清理 LuckySheet 实例
|
||||
this.destroyLuckySheet();
|
||||
},
|
||||
methods: {
|
||||
// 加载 Excel 文件
|
||||
async loadExcel() {
|
||||
if (!this.excelUrl) {
|
||||
this.error = 'Excel 文件地址为空';
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
// 获取 Excel 文件
|
||||
const response = await fetch(this.excelUrl);
|
||||
if (!response.ok) {
|
||||
throw new Error(`文件加载失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
// 转换为 ArrayBuffer
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
|
||||
// 使用 XLSX 解析 Excel 文件
|
||||
const workbook = XLSX.read(arrayBuffer, { type: 'array' });
|
||||
this.workbook = workbook;
|
||||
|
||||
// 转换为 LuckySheet 需要的格式
|
||||
const luckySheetData = this.convertToLuckySheet(workbook);
|
||||
|
||||
// 渲染 LuckySheet
|
||||
this.renderLuckySheet(luckySheetData);
|
||||
|
||||
} catch (err) {
|
||||
console.error('加载 Excel 文件失败:', err);
|
||||
this.error = `加载失败: ${err.message}`;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 将 XLSX 工作簿转换为 LuckySheet 格式
|
||||
convertToLuckySheet(workbook) {
|
||||
if (!workbook || !workbook.SheetNames || workbook.SheetNames.length === 0) {
|
||||
throw new Error('Excel 文件格式无效或没有工作表');
|
||||
}
|
||||
|
||||
const sheets = [];
|
||||
|
||||
workbook.SheetNames.forEach((sheetName, index) => {
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
if (!worksheet) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取工作表数据
|
||||
let sheetData = [];
|
||||
try {
|
||||
sheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: '' });
|
||||
} catch (error) {
|
||||
console.error(`读取工作表 ${sheetName} 失败:`, error);
|
||||
sheetData = [];
|
||||
}
|
||||
|
||||
if (!Array.isArray(sheetData)) {
|
||||
sheetData = [];
|
||||
}
|
||||
|
||||
// 计算行列范围
|
||||
const ref = worksheet['!ref'] ? XLSX.utils.decode_range(worksheet['!ref']) : null;
|
||||
const rowCount = ref ? ref.e.r + 1 : Math.max(sheetData.length, 36);
|
||||
const colCount = ref ? ref.e.c + 1 : Math.max(sheetData[0]?.length || 0, 26);
|
||||
|
||||
// 构建单元格数据
|
||||
const celldata = [];
|
||||
let maxRow = 0;
|
||||
let maxCol = 0;
|
||||
|
||||
sheetData.forEach((row, rowIndex) => {
|
||||
if (row && Array.isArray(row)) {
|
||||
maxRow = Math.max(maxRow, rowIndex);
|
||||
row.forEach((cell, colIndex) => {
|
||||
if (cell !== null && cell !== undefined && cell !== '') {
|
||||
maxCol = Math.max(maxCol, colIndex);
|
||||
const cellType = typeof cell === 'number' ? 'n' : 'g';
|
||||
|
||||
celldata.push({
|
||||
r: rowIndex,
|
||||
c: colIndex,
|
||||
v: {
|
||||
v: cell,
|
||||
ct: { fa: 'General', t: cellType },
|
||||
m: String(cell)
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 处理合并单元格
|
||||
const mergeConfig = {};
|
||||
const merges = worksheet['!merges'] || [];
|
||||
if (Array.isArray(merges)) {
|
||||
merges.forEach(merge => {
|
||||
if (merge?.s && merge?.e) {
|
||||
const r = merge.s.r;
|
||||
const c = merge.s.c;
|
||||
const rs = merge.e.r - merge.s.r + 1;
|
||||
const cs = merge.e.c - merge.s.c + 1;
|
||||
|
||||
if (typeof r === 'number' && typeof c === 'number' &&
|
||||
typeof rs === 'number' && typeof cs === 'number' &&
|
||||
rs > 0 && cs > 0) {
|
||||
mergeConfig[`${r}_${c}`] = { r, c, rs, cs };
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 构建 LuckySheet 配置
|
||||
const sheetConfig = {
|
||||
name: sheetName,
|
||||
index: index === 0 ? '0' : String(Math.random()),
|
||||
status: index === 0 ? 1 : 0,
|
||||
order: index === 0 ? 0 : 1,
|
||||
row: Math.max(maxRow + 1, 36),
|
||||
column: Math.max(maxCol + 1, 26),
|
||||
celldata: celldata,
|
||||
config: {
|
||||
merge: mergeConfig
|
||||
}
|
||||
};
|
||||
|
||||
sheets.push(sheetConfig);
|
||||
});
|
||||
|
||||
if (sheets.length === 0) {
|
||||
throw new Error('Excel 文件中没有有效数据');
|
||||
}
|
||||
|
||||
return sheets;
|
||||
},
|
||||
|
||||
// 渲染 LuckySheet
|
||||
renderLuckySheet(sheetData) {
|
||||
// 等待 loading 状态更新和 DOM 渲染
|
||||
this.$nextTick(() => {
|
||||
// 再次等待确保容器元素已渲染
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const container = document.getElementById('luckysheet');
|
||||
if (!container) {
|
||||
throw new Error('容器元素不存在');
|
||||
}
|
||||
|
||||
// 确保容器有尺寸
|
||||
if (container.offsetWidth === 0 || container.offsetHeight === 0) {
|
||||
setTimeout(() => this.renderLuckySheet(sheetData), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空容器
|
||||
container.innerHTML = '';
|
||||
|
||||
// 销毁现有的 LuckySheet 实例
|
||||
if (this.luckySheetInstance) {
|
||||
try {
|
||||
LuckySheet.destroy();
|
||||
} catch (e) {
|
||||
console.warn('销毁旧实例失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化 LuckySheet - 只保留基础配置
|
||||
this.luckySheetInstance = LuckySheet.create({
|
||||
container: 'luckysheet',
|
||||
data: sheetData,
|
||||
allowEdit: false,
|
||||
showtoolbar: false,
|
||||
showsheetbar: sheetData.length > 1,
|
||||
showstatisticBar: false,
|
||||
enableAddRow: false,
|
||||
enableAddCol: false
|
||||
});
|
||||
|
||||
console.log('LuckySheet 初始化成功');
|
||||
|
||||
} catch (err) {
|
||||
console.error('LuckySheet 渲染失败:', err);
|
||||
this.error = `表格渲染失败: ${err.message}`;
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
|
||||
// 重新加载
|
||||
reload() {
|
||||
this.loadExcel();
|
||||
},
|
||||
|
||||
// 销毁 LuckySheet 实例
|
||||
destroyLuckySheet() {
|
||||
try {
|
||||
LuckySheet.destroy();
|
||||
this.luckySheetInstance = null;
|
||||
} catch (err) {
|
||||
console.warn('销毁 LuckySheet 失败:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 导出 Excel 文件
|
||||
exportExcel() {
|
||||
if (!this.luckySheetInstance) {
|
||||
this.$message.warning('没有可导出的数据');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取 LuckySheet 数据
|
||||
const luckysheetData = LuckySheet.getAllSheets();
|
||||
|
||||
// 创建工作簿
|
||||
const workbook = XLSX.utils.book_new();
|
||||
|
||||
// 遍历所有工作表
|
||||
luckysheetData.forEach((sheet) => {
|
||||
// 转换单元格数据为二维数组
|
||||
const maxRow = Math.max(...sheet.celldata.map(cell => cell.r)) + 1;
|
||||
const maxCol = Math.max(...sheet.celldata.map(cell => cell.c)) + 1;
|
||||
|
||||
const data = [];
|
||||
for (let r = 0; r < maxRow; r++) {
|
||||
const row = [];
|
||||
for (let c = 0; c < maxCol; c++) {
|
||||
const cell = sheet.celldata.find(item => item.r === r && item.c === c);
|
||||
row.push(cell ? cell.v : '');
|
||||
}
|
||||
data.push(row);
|
||||
}
|
||||
|
||||
// 创建工作表
|
||||
const worksheet = XLSX.utils.aoa_to_sheet(data);
|
||||
|
||||
// 添加工作表到工作簿
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, sheet.name);
|
||||
});
|
||||
|
||||
// 导出文件
|
||||
XLSX.writeFile(workbook, 'exported-excel.xlsx');
|
||||
this.$message.success('导出成功');
|
||||
|
||||
} catch (err) {
|
||||
console.error('导出失败:', err);
|
||||
this.$message.error('导出失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.document-excel {
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.viewer-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.state-panel {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.state-icon {
|
||||
font-size: 48px;
|
||||
color: #409EFF;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.state-panel p {
|
||||
margin: 16px 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.excel-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* 确保 LuckySheet 样式正确应用 */
|
||||
:deep(#luckysheet) {
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.document-excel {
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.state-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.state-panel p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
// 默认参数
|
||||
const defaultParams = {
|
||||
fileType: 'technical_solution',
|
||||
uploadType: 'pdf、doc、docx',
|
||||
uploadType: 'pdf、doc、docx、xls、xlsx',
|
||||
maxFileTips: '500MB',
|
||||
fileUploadRule: {
|
||||
fileUploadType: 'technical_solution',
|
||||
|
|
|
|||
|
|
@ -107,6 +107,44 @@ module.exports = {
|
|||
config.plugins.delete('preload') // TODO: need test
|
||||
config.plugins.delete('prefetch') // TODO: need test
|
||||
|
||||
// 处理 .ico 文件 - 必须在 CSS 规则之前
|
||||
config.module
|
||||
.rule('ico')
|
||||
.test(/\.ico$/)
|
||||
.use('file-loader')
|
||||
.loader('file-loader')
|
||||
.options({
|
||||
name: 'static/[name].[hash:8].[ext]',
|
||||
esModule: false
|
||||
})
|
||||
.end()
|
||||
|
||||
// 配置 CSS loader 忽略 .ico 文件的 url 处理
|
||||
const cssRule = config.module.rule('css')
|
||||
if (cssRule && cssRule.oneOfs) {
|
||||
cssRule.oneOfs.store.forEach((oneOf) => {
|
||||
oneOf.uses.store.forEach((use, useKey) => {
|
||||
if (use.name && use.name.includes('css-loader')) {
|
||||
oneOf.use(useKey).tap(options => {
|
||||
if (!options) options = {}
|
||||
const originalUrl = options.url
|
||||
options.url = (url, resourcePath) => {
|
||||
// 忽略 .ico 文件的 url，避免 webpack 处理
|
||||
if (url && typeof url === 'string' && (url.endsWith('.ico') || url.includes('.ico'))) {
|
||||
return false
|
||||
}
|
||||
if (typeof originalUrl === 'function') {
|
||||
return originalUrl(url, resourcePath)
|
||||
}
|
||||
return originalUrl !== false
|
||||
}
|
||||
return options
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// set svg-sprite-loader
|
||||
config.module
|
||||
.rule('svg')
|
||||
|
|
|
|||
Loading…
Reference in New Issue