LuckyExcel预览excel

1安装

npm i -S exceljs file-saver luckyexcel

2在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>

3解决跨域问题（Nginx跨域配置）

修改nginx server 配置，添加如下内容

#允许跨域请求的域，* 代表所有
add_header 'Access-Control-Allow-Origin' *;
#允许请求的header
add_header 'Access-Control-Allow-Headers' *;
#允许带上cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
#允许请求的方法，比如 GET,POST,PUT,DELETE
add_header 'Access-Control-Allow-Methods' *;

4代码

<template>
  <div class="hello">
    <div style="position: absolute;top:5px;cursor: pointer;">
        <el-button @click="excel">下载</el-button>
    </div>
    <div
      id="luckysheet"
      style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 30px;bottom:0px;"
    ></div>
  </div>
</template>

<script>
import LuckyExcel from 'luckyexcel';
import {testaaa,exportExcel} from './export';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
     
    }
  },
  mounted() {
    this.uploadExcel();
  },
  methods:{
    uploadExcel(){
        LuckyExcel.transformExcelToLuckyByUrl(
            "http://flow.gdzawy.com:9000/3333.xlsx",
            "dade", (exportJson, luckysheetfile) => {
              console.log(exportJson);
              console.log(luckysheetfile);
              if (exportJson.sheets == null || exportJson.sheets.length == 0) {
                alert("文件读取失败!");
                return;
              }
              // 销毁原来的表格
              window.luckysheet.destroy();
              // 重新创建新表格
              window.luckysheet.create({
                container: 'luckysheet', // 设定DOM容器的id
                lang: 'zh', // 中文
                showtoolbarConfig:{
                    print: false, 
                },
                printBefore:false,
                showinfobar: false, // 是否显示顶部信息栏
                data: exportJson.sheets, //表格内容
                title: exportJson.info.name //表格标题
              });
        });
    },
    excel(){
        //年
        let year = new Date().getFullYear();
        //月份是从0月开始获取的，所以要+1;
        let month = new Date().getMonth() +1;
        //日
        let day = new Date().getDate();
        //时
        let hour = new Date().getHours();
        //分
        let minute = new Date().getMinutes();
        //秒
        let second = new Date().getSeconds();
        let date = year+'-'+month+'-'+day+' '+hour+":"+minute+":"+second
        exportExcel(luckysheet.getAllSheets(),date)
    }
  }
}
</script>
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

配置

luckysheet配置项
 //  在线表格配置表
            printPayFeeNewOptions: {
                container: 'printPayFeeNew', //printPayFeeNew为容器id
                title: '牛利家园打印中心', // 设置标题
                lang: 'zh',  //设置中文
                showinfobar: false, //是否显示顶部信息栏
                showsheetbar: false, // 是否显示底部sheet页按钮
                showstatisticBar: true,//是否显示底部计数栏
                showstatisticBarConfig: { //自定义配置底部计数栏
                    count: false, // 计数栏
                    view: true, // 打印视图
                    zoom: true, // 缩放
                },
                showtoolbarConfig: {  //自定义配置工具栏
                    undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
                    paintFormat: true, //格式刷
                    currencyFormat: true, //货币格式
                    percentageFormat: true, //百分比格式
                    numberDecrease: true, // '减少小数位数'
                    numberIncrease: true, // '增加小数位数
                    moreFormats: true, // '更多格式'
                    font: true, // '字体'
                    fontSize: true, // '字号大小'
                    bold: true, // '粗体 (Ctrl+B)'
                    italic: true, // '斜体 (Ctrl+I)'
                    strikethrough: true, // '删除线 (Alt+Shift+5)'
                    underline: true, // '下划线 (Alt+Shift+6)'
                    textColor: true, // '文本颜色'
                    fillColor: true, // '单元格颜色'
                    border: true, // '边框'
                    mergeCell: true, // '合并单元格'
                    horizontalAlignMode: true, // '水平对齐方式'
                    verticalAlignMode: true, // '垂直对齐方式'
                    textWrapMode: true, // '换行方式'
                    textRotateMode: false, // '文本旋转方式'
                    image: false, // '插入图片'
                    link: false, // '插入链接'
                    chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
                    postil: false, //'批注'
                    pivotTable: false,  //'数据透视表'
                    function: false, // '公式'
                    frozenMode: false, // '冻结方式'
                    sortAndFilter: false, // '排序和筛选'
                    conditionalFormat: false, // '条件格式'
                    dataVerification: false, // '数据验证'
                    splitColumn: false, // '分列'
                    screenshot: true, // '截图'
                    findAndReplace: false, // '查找替换'
                    protection: false, // '工作表保护'
                    print: false, // '打印'
                },
                cellRightClickConfig: { //右键单元格菜单设置
                    copy: false, // 复制
                    copyAs: false, // 复制为
                    paste: false, // 粘贴
                    insertRow: false, // 插入行
                    insertColumn: false, // 插入列
                    deleteRow: false, // 删除选中行
                    deleteColumn: false, // 删除选中列
                    deleteCell: false, // 删除单元格
                    hideRow: false, // 隐藏选中行和显示选中行
                    hideColumn: false, // 隐藏选中列和显示选中列
                    rowHeight: false, // 行高
                    columnWidth: false, // 列宽
                    clear: false, // 清除内容
                    matrix: false, // 矩阵操作选区
                    sort: false, // 排序选区
                    filter: false, // 筛选选区
                    chart: false, // 图表生成
                    image: false, // 插入图片
                    link: false, // 插入链接
                    data: false, // 数据验证
                    cellFormat: false // 设置单元格格式
},
     hook: {
            //   单元格渲染结束后触发，return false 则不渲染该单元格
           cellRenderAfter: function (cell, position, sheetFile, ctx) {
            //   渲染结束后   收据图片
            var r = position.r;
            var c = position.c;
 
          $that.drawingChapter(r, c, ctx, position)
       },
     },
    data: null,//表格内容
}
 
 
 
 
// 渲染收据章
drawingChapter(r, c, ctx, position) {
    let fees = $that.printPayFeeNewInfo.fees //费用项
    let feeLength = Number(fees.length) //费用项长度，用于渲染行数
        if (r === feeLength + 3 + 1 && c === 6) {
            var img = null;
            img = new Image();
            img.src = $that.printPayFeeNewInfo.qrImg;
            let width = (80 * img.width) / img.height
            // 已经加载完成的直接渲染
            ctx.drawImage(img, position.start_c + 10, position.start_r, width, 80);
         }
}