前端文档

图形示例

excel

满足现阶段所有需求（包含以下两个方法的功能）

const res = await this.$exportExcelGrid({
  fileName: "导出文件",
  rowHeights: [60, 70, 80, 90, 100],
  colWidths: [200, 250, 80, 80, 80],
  grids: [
    [
      {
        value: 1,
        isUrl: false,
        isImage: false,
        backgroundColor: "FFFFFF00",
        fontSize: 15,
        fontColor: "FF036ED5",
        fontBold: true,
      },
      {
        value: 2,
        backgroundColor: "FFC3CBDD",
        textAlign: "center",
        textVertical: "middle",
        textWrap: true,
        textIndent: 0,
        fontSize: 11,
        fontColor: "FF000000",
        fontBold: false,
      },
      {
        value: 3,
        textAlign: "center",
        textVertical: "middle",
        textWrap: true,
        textIndent: 0,
        fontSize: 11,
        fontColor: "FF000000",
        fontBold: false,
      },
      {
        value: files.img1,
        isImage: true,
        textAlign: "center",
        textVertical: "middle",
        textWrap: true,
        textIndent: 0,
        fontSize: 11,
        fontColor: "FF000000",
        fontBold: false,
      },
      {
        value: files.img2,
        isImage: true,
        textAlign: "center",
        textVertical: "middle",
        textWrap: true,
        textIndent: 0,
        fontSize: 11,
        fontColor: "FF000000",
        fontBold: false,
      },
      {
        value:
          "https://dl-yiyunappclient.effio.cn/resource/common/imageNull.png",
        isUrl: true,
        isImage: false,
        textAlign: "left",
        textVertical: "middle",
        textWrap: false,
        textIndent: 0,
        fontSize: 11,
        fontColor: "FF000000",
        fontBold: false,
      },
    ],
    [
      { value: 7 },
      { value: 8 },
      { value: 9 },
      { value: 10 },
      { value: 11 },
    ],
    [
      { value: 12 },
      { value: 13 },
      { value: 14 },
      { value: 15 },
      { value: 16 },
    ],
    [
      { value: 17 },
      { value: 18 },
      { value: 19 },
      { value: 20 },
      { value: 21 },
    ],
    [
      { value: 22 },
      { value: 23 },
      { value: 24 },
      { value: 25 },
      { value: 26 },
    ],
    [
      { value: 27 },
      { value: 28 },
      { value: 29 },
      { value: 30 },
      { value: 31 },
    ],
  ],
  merges: ["A1:C1", "A4:A6", "C3:E3"],
  exportImmediately: true,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

参数说明

参数 说明 类型 可选值 默认值
fileName excel文件名称 String - 导出文件
rowHeights 行高集合 Array - [80,80,80,...]
colWidths 列宽集合 Array - [161,161,161,...]
grids 数据集合 Array - []
merges 单元格合并集合 Array - []
exportImmediately 是否立即导出excel文件 Boolean true/false true

grids字段说明

参数 说明 类型 可选值 默认值
value 单元格值 any - ""
isUrl 是否为超链接 Boolean true/false false
isImage 是否为图片 Boolean true/false false
textAlign 文本水平对齐方式 String left/center/right center
textVertical 文本垂直对齐方式 String top/middle/bottom middle
textWrap 文本溢出是否换行 Boolean true/false false
textIndent 文本缩进 Number - 0
fontSize 字体大小 Number - 11
fontColor 字体颜色(ARGB值) String - FF000000
fontBold 字体是否加粗 Boolean true/false false
backgroundColor 背景颜色(ARGB值) String - FFFFFFFF

支持直接导出图片

const res = await this.$exportExcelIncludeBase64({
        fileName: "导出模板",
        tableHead: [            
            "问题描述",
            "图片",
            "图片",
            "图片",
            "分类",
            "反馈图片",
            "反馈图片",
            "位置",
            "状态",
            "记录时间",
            "记录人",
            "下发整改人"
        ],
        tableBody: [
          [
            "蓄电池接线头坚固完好，无腐蚀、脱落、过热、烧焦、异味等现象",
            imageBase64,
            imageBase64,
            imageBase64,
            "设备",
            imageBase64,
            imageBase64,
            "机械车间",
            "待下发",
            "2020/05/06 15:26",
            "张三",
            "时璐凤",
          ],
        ],
        colStyles: [
            { width: 510, textAlign: 'left', textVertical: "middle", textWrap: false, textIndent: 1, fontSize: 16, fontColor: 'FF00FF00', fontBold: true, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 123, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 164, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 124, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 161, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 113, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 173, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
        ],
        rowHeight: 80,
        tableHeadMerges: [{mergeStart:2,mergeCols:3},{mergeStart:6,mergeCols:2}],
        exportImmediately:true
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
参数 说明 类型
fileName excel文件名称 String
tableHead excel表头 Array
tableBody excel表体 Array
colWidth(废弃) excel表列宽 Array
colStyles excel表列样式 Array
rowHeight excel表体行高 Number
tableHeadMerges 表头合并集合 Array
exportImmediately 是否立即导出excel文件 Boolean

图片超链接形式导出

    const res = await this.$exportExcel({
        fileName: "导出模板",
        tableHead: [            
            "问题描述",
            "图片",
            "图片",
            "图片",
            "分类",
            "反馈图片",
            "反馈图片",
            "位置",
            "状态",
            "记录时间",
            "记录人",
            "下发整改人"
        ],
        tableBody: [
          [
            "蓄电池接线头坚固完好，无腐蚀、脱落、过热、烧焦、异味等现象",
            "https://dl-yiyunappclient.effio.cn/resource/common/imageNull.png",
            "https://dl-yiyunappclient.effio.cn/resource/common/imageNull.png",
            "https://dl-yiyunappclient.effio.cn/resource/common/imageNull.png",
            "设备",
            "https://dl-yiyunappclient.effio.cn/resource/common/imageNull.png",
            "https://dl-yiyunappclient.effio.cn/resource/common/imageNull.png",
            "机械车间",
            "待下发",
            "2020/05/06 15:26",
            "张三",
            "时璐凤",
          ],
        ],
        colStyles: [
            { width: 510, textAlign: 'left', textVertical: "middle", textWrap: false, textIndent: 1, fontSize: 16, fontColor: 'FF00FF00', fontBold: true, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 123, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 82, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 164, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 124, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 161, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 113, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
            { width: 173, textAlign: 'center', textVertical: "middle", textWrap: true, textIndent: 0, },
        ],
        rowHeight: 80,
        tableHeadMerges: [{mergeStart:2,mergeCols:3},{mergeStart:6,mergeCols:2}],
        exportImmediately:true
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
参数 说明 类型
fileName excel文件名称 String
tableHead excel表头 Array
tableBody excel表体 Array
colWidth(废弃) excel表列宽 Array
colStyles excel表列样式 Array
rowHeight excel表体行高 Number
tableHeadMerges 表头合并集合 Array
exportImmediately 是否立即导出excel文件 Boolean

colStyles字段说明

参数 说明 类型 可选值 默认值
width 列宽 Number - 161
textAlign 文本水平对齐方式 String left/center/right center
textVertical 文本垂直对齐方式 String top/middle/bottom middle
textWrap 文本溢出是否换行 Boolean true/false false
textIndent 文本缩进 Number - 0
fontSize 字体大小 Number - 11
fontColor 字体颜色(ARGB值) String - FF000000
fontBold 字体是否加粗 Boolean true/false false

← word文件导出 →