vue通过xlsx-style导出数据

最新推荐文章于 2023-09-08 17:48:28 发布
最新推荐文章于 2023-09-08 17:48:28 发布
阅读量855 收藏 3
点赞数 1
分类专栏： 导出 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44339604/article/details/114396418
版权

vue通过xlsx-style导出数据

1、安装依赖
npm install -S file-saver
npm install -S xlsx
npm install -S xlsx-style
npm install -D script-loader
注：xlsx-style组件报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
vue2x版本
就是有webpack配置
就是在webpack.base.conf.js中加入下面这段

module.exports = {
	externals: {
    	'./cptable': 'var cptable'
 	}
}

vue3x版本
在根目录下的vue.config.js(没有的话自己创建一个)
加入下面的代码

module.exports = {
	configureWebpack: {
    	externals: {
      		'./cptable': 'var cptable'
    	}
  	}
}

2、创建文件
在这里插入图片描述
3、主要代码
Blob.js

/* eslint-disable */
/*  Blob.js
 * A Blob implementation.
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/eboyjr
 * License: X11/MIT
 *   See LICENSE.md
 */

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

(function (view) {
    "use strict";

    view.URL = view.URL || view.webkitURL;

    if (view.Blob && view.URL) {
        try {
            new Blob;
            return;
        } catch (e) {}
    }

    // Internally we use a BlobBuilder implementation to base Blob off of
    // in order to support older browsers that only have BlobBuilder
    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
        var
            get_class = function (object) {
                return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
            },
            FakeBlobBuilder = function BlobBuilder() {
                this.data = [];
            },
            FakeBlob = function Blob(data, type, encoding) {
                this.data = data;
                this.size = data.length;
                this.type = type;
                this.encoding = encoding;
            },
            FBB_proto = FakeBlobBuilder.prototype,
            FB_proto = FakeBlob.prototype,
            FileReaderSync = view.FileReaderSync,
            FileException = function (type) {
                this.code = this[this.name = type];
            },
            file_ex_codes = (
                "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +
                "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
            ).split(" "),
            file_ex_code = file_ex_codes.length,
            real_URL = view.URL || view.webkitURL || view,
            real_create_object_URL = real_URL.createObjectURL,
            real_revoke_object_URL = real_URL.revokeObjectURL,
            URL = real_URL,
            btoa = view.btoa,
            atob = view.atob

            ,
            ArrayBuffer = view.ArrayBuffer,
            Uint8Array = view.Uint8Array;
        FakeBlob.fake = FB_proto.fake = true;
        while (file_ex_code--) {
            FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
        }
        if (!real_URL.createObjectURL) {
            URL = view.URL = {};
        }
        URL.createObjectURL = function (blob) {
            var
                type = blob.type,
                data_URI_header;
            if (type === null) {
                type = "application/octet-stream";
            }
            if (blob instanceof FakeBlob) {
                data_URI_header = "data:" + type;
                if (blob.encoding === "base64") {
                    return data_URI_header + ";base64," + blob.data;
                } else if (blob.encoding === "URI") {
                    return data_URI_header + "," + decodeURIComponent(blob.data);
                }
                if (btoa) {
                    return data_URI_header + ";base64," + btoa(blob.data);
                } else {
                    return data_URI_header + "," + encodeURIComponent(blob.data);
                }
            } else if (real_create_object_URL) {
                return real_create_object_URL.call(real_URL, blob);
            }
        };
        URL.revokeObjectURL = function (object_URL) {
            if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
                real_revoke_object_URL.call(real_URL, object_URL);
            }
        };
        FBB_proto.append = function (data /*, endings*/ ) {
            var bb = this.data;
            // decode data to a binary string
            if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
                var
                    str = "",
                    buf = new Uint8Array(data),
                    i = 0,
                    buf_len = buf.length;
                for (; i < buf_len; i++) {
                    str += String.fromCharCode(buf[i]);
                }
                bb.push(str);
            } else if (get_class(data) === "Blob" || get_class(data) === "File") {
                if (FileReaderSync) {
                    var fr = new FileReaderSync;
                    bb.push(fr.readAsBinaryString(data));
                } else {
                    // async FileReader won't work as BlobBuilder is sync
                    throw new FileException("NOT_READABLE_ERR");
                }
            } else if (data instanceof FakeBlob) {
                if (data.encoding === "base64" && atob) {
                    bb.push(atob(data.data));
                } else if (data.encoding === "URI") {
                    bb.push(decodeURIComponent(data.data));
                } else if (data.encoding === "raw") {
                    bb.push(data.data);
                }
            } else {
                if (typeof data !== "string") {
                    data += ""; // convert unsupported types to strings
                }
                // decode UTF-16 to binary string
                bb.push(unescape(encodeURIComponent(data)));
            }
        };
        FBB_proto.getBlob = function (type) {
            if (!arguments.length) {
                type = null;
            }
            return new FakeBlob(this.data.join(""), type, "raw");
        };
        FBB_proto.toString = function () {
            return "[object BlobBuilder]";
        };
        FB_proto.slice = function (start, end, type) {
            var args = arguments.length;
            if (args < 3) {
                type = null;
            }
            return new FakeBlob(
                this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding
            );
        };
        FB_proto.toString = function () {
            return "[object Blob]";
        };
        FB_proto.close = function () {
            this.size = this.data.length = 0;
        };
        return FakeBlobBuilder;
    }(view));

    view.Blob = function Blob(blobParts, options) {
        var type = options ? (options.type || "") : "";
        var builder = new BlobBuilder();
        if (blobParts) {
            for (var i = 0, len = blobParts.length; i < len; i++) {
                builder.append(blobParts[i]);
            }
        }
        return builder.getBlob(type);
    };
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

exportExcel.js

// Export2Excel.js
/* eslint-disable */
import 'script-loader!file-saver';
import './Blob.js'; //转二进制用  这边要写你的blob的实际地址
import 'script-loader!xlsx/dist/xlsx.core.min';
import XLSXS from 'xlsx-style'

function datenum(v, date1904) {
    if (date1904) v += 1462;
    var epoch = Date.parse(v);
    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
    var ws = {};
    var range = {
        s: {
            c: 10000000,
            r: 10000000
        },
        e: {
            c: 0,
            r: 0
        }
    };
    for (var R = 0; R != data.length; ++R) {
        for (var C = 0; C != data[R].length; ++C) {
            if (range.s.r > R) range.s.r = R;
            if (range.s.c > C) range.s.c = C;
            if (range.e.r < R) range.e.r = R;
            if (range.e.c < C) range.e.c = C;
            var cell = {
                v: data[R][C]
            };
            if (cell.v == null) continue;
            var cell_ref = XLSXS.utils.encode_cell({
                c: C,
                r: R
            });

            if (typeof cell.v === 'number') cell.t = 'n';
            else if (typeof cell.v === 'boolean') cell.t = 'b';
            else if (cell.v instanceof Date) {
                cell.t = 'n';
                cell.z = XLSXS.SSF._table[14];
                cell.v = datenum(cell.v);
            } else cell.t = 's';

            ws[cell_ref] = cell;
        }
    }
    if (range.s.c < 10000000) ws['!ref'] = XLSXS.utils.encode_range(range);
    return ws;
}

function Workbook() {
    if (!(this instanceof Workbook)) return new Workbook();
    this.SheetNames = [];
    this.Sheets = {};
}

function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

// 导出单个表格
export function exportjsontoexcel({
    data, //格式后的数据
    filename, //表名
    merges = [], //合并单元格格式
    autoWidth = true,
    bookType = 'xlsx',
    formStyle, // 样式修改
} = {}) {
    /* original data */
    //判断是否有表名、没有则赋予固定表名
    filename = filename || 'excel-list'

    var ws_name = "SheetJS";
    var wb = new Workbook(),
        //将data转化格式 用于接下来动态宽度
        ws = sheet_from_array_of_arrays(data);

    //合并单元格
    ws['!merges'] = merges
    //动态设置宽度
    if (autoWidth) {
        /*设置worksheet每列的最大宽度*/
        const colWidth = data.map(row => row.map(val => {
            /*先判断是否为null/undefined*/
            if (val == null) {
                return {
                    'wch': 10
                };
            }
            /*再判断是否为中文*/
            else if (val.toString().charCodeAt(0) > 255) {
                return {
                    'wch': val.toString().length * 2
                };
            } else {
                return {
                    'wch': val.toString().length
                };
            }
        }))
        //判断合并单元格中是否有同行合并，有则将其长度设为0
        if (merges.length > 0) {
            if (!ws['!merges']) ws['!merges'] = [];
            merges.forEach(a => {
                let w1 = a.s.c
                let e1 = a.s.r
                let w2 = a.e.c
                let e2 = a.e.r
                if (e1 == e2) {
                    if (+w1 > +w2) {
                        let jh = w1
                        w1 = w2
                        w2 = jh
                    }
                    for (let i = +w1; i <= +w2; i++) {
                        colWidth[e1][i]['wch'] = 0;
                    }
                }
            })
        }
        /*以第一行为初始值 判断对应每一列的最大长度*/
        let result = colWidth[0];
        for (let i = 1; i < colWidth.length; i++) {
            for (let j = 0; j < colWidth[i].length; j++) {
                if (result[j]['wch'] < colWidth[i][j]['wch']) {
                    result[j]['wch'] = colWidth[i][j]['wch'];
                }
            }
        }
        ws['!cols'] = result;
    }

    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;
    var dataInfo = wb.Sheets[wb.SheetNames[0]];

    const borderAll = { //单元格外侧框线
        top: {
            style: 'thin'
        },
        bottom: {
            style: 'thin'
        },
        left: {
            style: 'thin'
        },
        right: {
            style: 'thin'
        }
    };
    //给所以单元格加上边框
    const letter = {
        "A": 0,
        "B": 1,
        "C": 2,
        "D": 3,
        "E": 4,
        "F": 5,
        "G": 6,
        "H": 7,
        "I": 8,
        "J": 9,
        "K": 10,
        "L": 11,
        "M": 12,
        "N": 13,
        "O": 14,
        "P": 15,
        "Q": 16,
        "R": 17,
        "S": 18,
        "T": 19,
        "U": 20,
        "V": 21,
        "W": 22,
        "X": 23,
        "Y": 24,
        "Z": 25
    }
    const range = dataInfo['!ref'].split(':') // 表格范围区域
    let a1 = range[0].slice(0, 1) // A
    let b1 = +range[0].slice(1) // 1
    let a2 = range[1].slice(0, 1) // 最大为Z（26） 表格的列数
    let b2 = +range[1].slice(1) // 表格的行数
    for (let i = letter[a1]; i <= letter[a2]; i++) {
        for (let j = b1; j <= b2; j++) {
            let value = ''
            for (let key in letter) {
                if (letter[key] == i) {
                    value = key
                }
            }
            if (!dataInfo[value + j]) {
                dataInfo[value + j] = {
                    s: {
                        border: borderAll,
                    }
                }
            }

        }
    }

    for (var i in dataInfo) {
        if (i == '!ref' || i == '!merges' || i == '!cols') {

        } else {
            dataInfo[i + ''].s = {
                border: borderAll,
                //居中属性
                alignment: {
                    horizontal: "center",
                    vertical: "center"
                },
            }
        }
    }

    //设置主标题样式
    for (let key in formStyle) {
        dataInfo[key].s = formStyle[key]
        dataInfo[key].s.border = borderAll
    }

    var wbout = XLSXS.write(wb, {
        bookType: bookType,
        bookSST: false,
        type: 'binary'
    });
    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), `${filename}.${bookType}`);
};

// 导出多个表格  下方带tab切换
export function exportjsontoexcelMore({
    dataList,
    filename,
    bookType = 'xlsx',
}) {
    //判断是否有表名、没有则赋予固定表名
    filename = filename || 'excel-list'
    var wb = new Workbook()
    dataList.forEach((item, index) => {
        let {
            Sheet,
            data,
            merges,
            autoWidth,
            formStyle
        } = item
        let ws = sheet_from_array_of_arrays(data)
        //合并单元格
        ws['!merges'] = merges
        //动态设置宽度
        if (autoWidth) {
            /*设置worksheet每列的最大宽度*/
            const colWidth = data.map(row => row.map(val => {
                /*先判断是否为null/undefined*/
                if (val == null) {
                    return {
                        'wch': 15
                    };
                }
                /*再判断是否为中文*/
                else if (val.toString().charCodeAt(0) > 255) {
                    return {
                        'wch': val.toString().length * 2
                    };
                } else {
                    return {
                        'wch': val.toString().length
                    };
                }
            }))
            //判断合并单元格中是否有同行合并，有则将其长度设为0
            if (merges.length > 0) {
                if (!ws['!merges']) ws['!merges'] = [];
                merges.forEach(a => {
                    let w1 = a.s.c
                    let e1 = a.s.r
                    let w2 = a.e.c
                    let e2 = a.e.r
                    if (e1 == e2) {
                        if (+w1 > +w2) {
                            let jh = w1
                            w1 = w2
                            w2 = jh
                        }
                        for (let i = +w1; i <= +w2; i++) {
                            colWidth[e1][i]['wch'] = 0;
                        }
                    }
                })
            }
            /*以第一行为初始值 判断对应每一列的最大长度*/
            let result = colWidth[0];
            for (let i = 1; i < colWidth.length; i++) {
                for (let j = 0; j < colWidth[i].length; j++) {
                    if (result[j]['wch'] < colWidth[i][j]['wch']) {
                        result[j]['wch'] = colWidth[i][j]['wch'];
                    }
                }
            }
            ws['!cols'] = result;
        }

        /* add worksheet to workbook */
        wb.SheetNames.push(Sheet);
        wb.Sheets[Sheet] = ws;
        let dataInfo = wb.Sheets[wb.SheetNames[index]];

        const borderAll = { //单元格外侧框线
            top: {
                style: 'thin'
            },
            bottom: {
                style: 'thin'
            },
            left: {
                style: 'thin'
            },
            right: {
                style: 'thin'
            }
        };
        //给所以单元格加上边框
        const letter = {
            "A": 0,
            "B": 1,
            "C": 2,
            "D": 3,
            "E": 4,
            "F": 5,
            "G": 6,
            "H": 7,
            "I": 8,
            "J": 9,
            "K": 10,
            "L": 11,
            "M": 12,
            "N": 13,
            "O": 14,
            "P": 15,
            "Q": 16,
            "R": 17,
            "S": 18,
            "T": 19,
            "U": 20,
            "V": 21,
            "W": 22,
            "X": 23,
            "Y": 24,
            "Z": 25
        }
        const range = dataInfo['!ref'].split(':') // 表格范围区域
        let a1 = range[0].slice(0, 1) // A
        let b1 = +range[0].slice(1) // 1
        let a2 = range[1].slice(0, 1) // 最大为Z（26） 表格的列数
        let b2 = +range[1].slice(1) // 表格的行数
        for (let i = letter[a1]; i <= letter[a2]; i++) {
            for (let j = b1; j <= b2; j++) {
                let value = ''
                for (let key in letter) {
                    if (letter[key] == i) {
                        value = key
                    }
                }
                if (!dataInfo[value + j]) {
                    dataInfo[value + j] = {
                        s: {
                            border: borderAll,
                        }
                    }
                }

            }
        }

        for (var i in dataInfo) {
            if (i == '!ref' || i == '!merges' || i == '!cols') {

            } else {
                dataInfo[i + ''].s = {
                    border: borderAll,
                    //居中属性
                    alignment: {
                        horizontal: "center",
                        vertical: "center"
                    },
                }
            }
        }
        //设置主标题样式
    for (let key in formStyle) {
        dataInfo[key].s = formStyle[key]
        dataInfo[key].s.border = borderAll
    }
    })

    var wbout = XLSXS.write(wb, {
        bookType: bookType,
        bookSST: false,
        type: 'binary'
    });
    saveAs(new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    }), `${filename}.${bookType}`);
}

vue

import { exportjsontoexcel,exportjsontoexcelMore } from '@/libs/exportExcel'

handleExport () {
                // s-start-开始；e-end-结束；r-row-行；c-column-列
                let title = 'xxx标题'
                let timeText = `统计日期：2020到2021`
                let headList = [
                    [title, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
                    [timeText, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
                    ['工号', '姓名', '提成1', null, null, null, null, null, '提成2', null, '提成3', null, '提成4', null, '合计（元）'],
                    ['工号', '姓名', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L','M' ]
                ] // 导出的表头数据
                let contentList = [] //表格内容导出的数据
                let merges1 = [ // 设置表头单元格合
                    { s: { r: 0, c: 0 }, e: { r: 0, c: 14 } },
                    { s: { r: 1, c: 0 }, e: { r: 1, c: 14 } },
                    { s: { r: 2, c: 2 }, e: { r: 2, c: 7 } },
                    { s: { r: 2, c: 8 }, e: { r: 2, c: 9 } },
                    { s: { r: 2, c: 10 }, e: { r: 2, c: 11 } },
                    { s: { r: 2, c: 12 }, e: { r: 2, c: 13 } },
                    { s: { r: 2, c: 0 }, e: { r: 3, c: 0 } },
                    { s: { r: 2, c: 1 }, e: { r: 3, c: 1 } },
                    { s: { r: 2, c: 14 }, e: { r: 3, c: 14 } }
                ] 
                
                let merges2 = [] // 设置表格内容单元格合并
                let aoa = [...headList, ...contentList] // 导出的数据
                let  merges = [...merges1, ...merges2] // 合并单元格
                 const filename = `文件名.xlsx`
                // 样式修改
                let formStyle = {}
                formStyle['A1'] = {
                    font: {
                        name: '宋体',
                        bold: true,
                        italic: false,
                        underline: false
                    },
                    alignment: {
                        horizontal: 'center',
                        vertical: 'center'
                    }
                }
             exportjsontoexcel ({
                    data: aoa, // 表格数据
                    merges, //  合并单元格
                    filename, // 导出文件名
                    autoWidth: true, // 自适应宽度
                    bookType: 'xlsx', // 导出类型
                    formStyle: formStyle // 特殊行或列样式
                })
            },
    handleExportMore () {
                let list = []
                for (let i = 0; i < 3; i++) {
                    let title = `第${i + 1}个表格`
                    let timeText = `统计日期：2020到2021`
                    let headList = [
                        [title, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
                        [timeText, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
                        ['工号', '姓名', '提成1', null, null, null, null, null, '提成2', null, '提成3', null, '提成4', null, '合计（元）'],
                        ['工号', '姓名', '大哥', '大哥', '大哥', '大哥', '大哥', '大哥', '大哥', '大哥', '大哥', '大哥', '大哥', '大哥', '大哥']
                    ] // 导出的表头数据
                    let contentList = []
                    let merges1 = [ // 设置表头单元格合
                        { s: { r: 0, c: 0 }, e: { r: 0, c: 14 } },
                        { s: { r: 1, c: 0 }, e: { r: 1, c: 14 } },
                        { s: { r: 2, c: 2 }, e: { r: 2, c: 7 } },
                        { s: { r: 2, c: 8 }, e: { r: 2, c: 9 } },
                        { s: { r: 2, c: 10 }, e: { r: 2, c: 11 } },
                        { s: { r: 2, c: 12 }, e: { r: 2, c: 13 } },
                        { s: { r: 2, c: 0 }, e: { r: 3, c: 0 } },
                        { s: { r: 2, c: 1 }, e: { r: 3, c: 1 } },
                        { s: { r: 2, c: 14 }, e: { r: 3, c: 14 } }
                    ] 
                
                    let merges2 = [] // 设置表格内容单元格合并
                    let aoa = [...headList, ...contentList] // 导出的数据
                    let merges = [...merges1, ...merges2] // 合并单元格
                    // 样式修改
                    let formStyle = {}
                    formStyle['A1'] = {
                        font: {
                            name: '宋体',
                            bold: true,
                            italic: false,
                            underline: false
                        },
                        alignment: {
                            horizontal: 'center',
                            vertical: 'center'
                        }
                    }
                    list.push({
                        Sheet: `第${i}个`, // 下方tab切换名称
                        data: aoa, // 表格数据
                        merges, //  合并单元格
                        autoWidth: true, // 自适应宽度
                        formStyle: formStyle // 特殊行或列样式
                    })
                }
                exportjsontoexcelMore({
                    dataList: list,
                    bookType: 'xlsx', // 导出类型
                    filename: '我的测试导出' // 导出标题名 
                })
            },
请叫我NoVel
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中导出Excel表格的实现代码
10-17
项目中我们可能会碰到导出Excel文件的需求，这篇文章主要介绍了vue中导出Excel表格的实现代码，非常具有实用价值，需要的朋友可以参考下
xlsx-js-style导出Demo,纯前端带样式导出表格数据
09-01
纯前端导出,xlsx.js只能导出不能携带样式，所以我们用了xlsx-js-style插件,可以实现带样式的前端导出表格,样式可自定义，表格背景颜色、字体颜色、表格行高、表格行宽等等都可以自行设置，导出速度快，实现可以自己...
vue项目使用yxg-xlsx-style组件将表格数据导出带有样式的excel文件
秦时明月的专栏
12-31 1074
引入组件yxg-xlsx-style 导出excel主要逻辑文件（跟业务无关）：excel-style.js import XLSX from 'yxg-xlsx-style' // 如果单元格是日期类型 function datenum (v, date1904) { if (date1904) v += 1462 let epoch = Date.parse(v) return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 ..
vue项目优化，通过externals加载外部CDN资源
MYuanFang的博客
11-15 1107
代码敲完，项目上线，然后就要与优化相遇。 项目时间非常的长加载慢的很，至此开始前端优化之旅 项目根目录运行 npm install webpack-bundle-analyzer --save-dev 在build/webpack.dev.conf.js中引入 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { devS..
Vue项目优化策略之通过externals加载外部CDN资源
Hiroshi's
01-07 589
默认情况下， 导入的第三方依赖包，都会合并到chunk-vendors.e50d51a8.js文件中，导致这个文件体积非常大 在项目打包期间，webpack会先检查external里面有没有申明第三方的依赖包，如果有的话webpack就不会把申明过的依赖包打包进去，而是用到依赖包的时候直接去window全局对象去找： 第一步： config.set('externals', { 'vue': 'Vue', 'vue-router': 'VueRouter', axio.
vue项目上线优化之 externals 加载外部 CDN 资源以及 CDN 优化
浮生离梦的博客
03-28 1515
一、通过 externals 加载外部 CDN 资源 默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功 后，单文件体积过大的问题。 为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在externals 中的第三方依赖包，都不会被打包。 在 vue.config.js 文件中...
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格）
08-30
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格），适用于前端开发人员，在非分页场景下对于table的导出。 主要方法：_export_table_to_excel()，在ExportExcel.js...
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
03-22
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
pikaz-excel-js:一个vue版本的excel导入导出插件
05-02
Introduction这个项目是在工作中并没有找到一个开箱即用的excel导入导出插件，js里比较知名的插件免费版没办法修改样式，而插件需要修改源码，都比较麻烦，所以在xlsx和xlsx-style的基础上做了简单的封装，做到开箱...
vue导入xlsx-style组件报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
HDdgut的博客
03-31 1263
解决：在vue.config.js添加 configureWebpack: { externals:{ './cptable': 'var cptable' }, }
纯前端导出导出列表(表格)为excel file-saver xlsx 及script-loader插件
AmyGeng123的博客
06-07 1541
2、src目录下新建一个文件夹命名为Excel(名称可以根据自身需要定义) 3、Blob.js 和 Export2Excel.js文件放到新建的Excel文件下 Blob.js Export2Excel.js 5、使用 因为界面用的比较多 所以这里定义为公共的方法, 在需要用的的地方直接调用就可以啦...
Failed to resolve loader: script-loader You may need to install it.
前端-尔嵘
11-17 3796
vue项目中 script-loader 报错及其解决
Vue 导出为excel文件file-saver+xlsx+script-loader
weixin_45941064的博客
04-01 1095
vue 导入excel
vue结合element的导入导出excel功能 file-saver
木子静静的博客
06-08 2086
要做纯前段的导入导出，搜索了好多地方才算把功能完整写出来了 ，这里整理一下，以备下次使用。 1.首先需要npm安装 npm install -S file-saver xlsx（这里其实安装了2个依赖） npm install -D script-loader 2.在src目录下新建excel文件夹，然后引入Blob.js和Expor2Excel.js 百度云盘 可获取到Blob.js和Expor2Excel.js 链接: https://pan.baidu.com/s/1z0sieEiY5wf4tpY
后端使用nodejs生成xlsx文件数据流，并返回给前端直接进行下载
wejdsjja的博客
05-23 4264
使用nodejs生成xlsx文件数据流，并返回给前端直接进行下载
前端表格导出excel文件（粘贴即用）
^_^
02-22 287
前端表格导出excel文件 1.下载file-saver 和script-loader 2.新建js文件 3.使用
XXX_WEBPACK_IMPORTED_MODULE_0 is not a function
最新发布
qq_44327851的博客
09-08 1184
当我在angular项目中npm i split.js （分割视图布局的轻量级工具，会有一篇单独的文章讲述这个的使用）依赖 成功之后，然后在我需要使用的模块中.ts文件中进行引入，起初的引入是这样的 import * as Split from 'split.js'，就此运行项目，控制台一直报错，Split_WEBPACK_IMPORTED_MODULE is not a function。改变的引入的层级，多加一级，完全奏效！1.报错背景：安装依赖引入使用时报错。2.解决方法：改变的引入的层级。
找不到对应的依赖 Could not resolve dependencie
进行中
06-09 518
mvn install 异常 [ERROR] Failed to execute goal on project xxx-service: Could not resolve dependencie. 1、可能是中央仓库配置有问题，不能从中央仓库下载对应的jar包， 2、可能是公共依赖没有install，把公共的依赖先执行install， 3、由于我自己是搞了vpn的，要注意自己的nexus是不是由于vpn而访问不了导致 ...
vue使用xlsx、xlsx-style和fileSaver导出excel表格
m0_66970189的博客
09-16 4182
本文引用。
vue XLSX xlsx-style结合
08-13
要在Vue中结合使用XLSX和xlsx-style库来处理Excel文件，您可以按照以下步骤进行操作： 1. 首先，确保您的Vue项目中已经安装了XLSX和xlsx-style。您可以使用npm或yarn进行安装： ``` npm install xlsx xlsx-style `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值