一、安装依赖包官网
npm i luckyexcel
template 模板
< div id = " luckysheet" style = ' width : 100vw; height : 100vh' > </ div>
二、加载
异步加载及
import LuckyExcel from 'luckyexcel ' ;
function asynLoad ( src, isCss = false ) {
return new Promise ( res => {
let el;
if ( isCss) {
el = document. createElement ( 'link' ) ;
el. rel = 'stylesheet' ;
el. href = src;
} else {
el = document. createElement ( 'script' ) ;
el. src = src;
}
document. documentElement. appendChild ( el) ;
el. onload = el. onreadystatechange = function ( ) {
if (
! this . readyState ||
this . readyState == 'loaded' ||
this . readyState == 'complete'
) {
res ( true ) ;
}
this . onload = this . onreadystatechange = null ;
} ;
} ) ;
}
export default {
created ( ) {
this . loadPlugins ( ) ;
} ,
methods : {
loadPlugins ( ) {
const baseURL = '//cdn.jsdelivr.net/npm/luckysheet@latest/dist' ;
this . loading = true ;
this . tip = '正在加载依赖插件,请耐心等待...' ;
Promise. all ( [
asynLoad ( ` ${ baseURL} /plugins/css/pluginsCss.css ` , true ) ,
asynLoad ( ` ${ baseURL} /plugins/plugins.css ` , true ) ,
asynLoad ( ` ${ baseURL} /css/luckysheet.css ` , true ) ,
asynLoad ( ` ${ baseURL} /assets/iconfont/iconfont.css ` , true ) ,
asynLoad ( ` ${ baseURL} /plugins/js/plugin.js ` ) ,
asynLoad ( ` ${ baseURL} /luckysheet.umd.js ` )
] )
. then ( ( ) => {
luckysheet = ( window as any) . luckysheet;
this . getOriginFile ( ) ;
} )
. catch ( res => {
this . loading = false ;
this . errStatus = 1 ;
this . errorTitle = '插件加载失败,请刷新后重试!' ;
} )
}
} ,
}
cdn 加载 index.html 文件
< link rel= 'stylesheet' href= 'https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' / >
< link rel= 'stylesheet' href= 'https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' / >
< link rel= 'stylesheet' href= 'https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' / >
< link rel= 'stylesheet' href= 'https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' / >
< script src= "https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js" > < / script>
< script src= "https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js" > < / script>
三、页面使用
export default {
methods : {
getOriginFile ( ) {
this . tip = '正在下载文件...' ;
this . loading = true
axios ( {
url : this . fileURL,
responseType : 'blob'
} ) . then ( ( { data } ) => {
const blob = new Blob ( [ data] ) ;
const file = new File ( [ blob] , this . fileName) ;
this . init ( file) ;
} ) . catch ( e => {
this . errorTitle = '文件解析失败,请下载后使用 Excel 打开或点击重试!'
this . errStatus = 2 ;
} ) . finally ( ( ) => {
this . loading = false ;
} )
}
init ( file : File) {
luckysheet. destroy ( ) ;
LuckyExcel. transformExcelToLucky ( file, exportJson => {
if ( exportJson. sheets === null || ! exportJson. sheets. length) {
this . $message. error ( '无法读取excel 文件的内容,当前不支持xls文件!' ) ;
return ;
}
luckysheet. create ( {
container : 'luckysheet' ,
showinfobar : false ,
lang : 'zh' ,
data : exportJson. sheets,
title : exportJson. info. name,
userInfo : exportJson. info. name. creator
} ) ;
} ) ;
}
} ,
}