index.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>xlsx在线预览</title>
  6. <link rel='stylesheet' href='plugins/css/pluginsCss.css' />
  7. <link rel='stylesheet' href='plugins/plugins.css' />
  8. <link rel='stylesheet' href='css/luckysheet.css' />
  9. <link rel='stylesheet' href='assets/iconfont/iconfont.css' />
  10. <script src="plugins/js/plugin.js"></script>
  11. <script src="luckysheet.umd.js"></script>
  12. <script src="../js/base64.min.js" type="text/javascript"></script>
  13. </head>
  14. <body>
  15. <div id="lucky-mask-demo" style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display: none;">Downloading</div>
  16. <p style="text-align:center;">
  17. <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 50px;bottom: 0px;outline: none;"></div>
  18. <script src="luckyexcel.umd.js"></script>
  19. <script>
  20. let str =location.search;
  21. let search =str.substr(1);
  22. //console.log(search);
  23. search = Base64.decode(decodeURIComponent(search));
  24. // console.log(search);
  25. let mask = document.getElementById("lucky-mask-demo");
  26. function loadText() {
  27. var value = search;
  28. var name = 'xlsx.xlsx';
  29. if(value==""){
  30. return;
  31. }
  32. // mask.style.display = "flex";
  33. LuckyExcel.transformExcelToLuckyByUrl(value, name, function(exportJson, luckysheetfile){
  34. if(exportJson.sheets==null || exportJson.sheets.length==0){
  35. alert("读取excel文件内容失败!");
  36. return;
  37. }
  38. mask.style.display = "none";
  39. window.luckysheet.destroy();
  40. window.luckysheet.create({
  41. container: 'luckysheet', //luckysheet is the container id
  42. lang: "zh",
  43. showtoolbarConfig:{
  44. image: true,
  45. print: false, //关闭打印按钮 启用也不能用 等以后看情况而定
  46. exportXlsx: false, //关闭导出按钮 启用也不能用 等以后看情况而定
  47. },
  48. allowCopy: true, // 是否允许拷贝
  49. showtoolbar: true, // 是否显示工具栏
  50. showinfobar: false, // 是否显示顶部信息栏
  51. // myFolderUrl: "/",//作用:左上角<返回按钮的链接
  52. showsheetbar: true, // 是否显示底部sheet页按钮
  53. showstatisticBar: true, // 是否显示底部计数栏
  54. sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
  55. allowEdit: true, // 是否允许前台编辑
  56. enableAddRow: false, // 允许增加行
  57. enableAddCol: false, // 允许增加列
  58. userInfo: false, // 右上角的用户信息展示样式
  59. showRowBar: true, // 是否显示行号区域
  60. showColumnBar: false, // 是否显示列号区域
  61. sheetFormulaBar: false, // 是否显示公式栏
  62. enableAddBackTop: true,//返回头部按钮
  63. forceCalculation: false, //下面是导出插件 默认关闭
  64. enableAddRow: false, // 允许增加行
  65. plugins: [{ name: 'chart' }, { name: 'exportXlsx', config: { url: 'luckyToXlsx' } }, {
  66. name: 'print', config: {
  67. license: ''
  68. }
  69. }],
  70. data:exportJson.sheets,
  71. title:exportJson.info.name,
  72. userInfo:exportJson.info.name.creator
  73. });
  74. });
  75. }
  76. loadText();
  77. </script>
  78. </body>
  79. </html>