vue表格导出报告 /报告模板

1.首先安装依赖

npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

2. 创建Blob.js和Export2Excel.js两个文件

Blob.js 代码如下:

/* Blob./* Blob.js
 * A Blob, File, FileReader & URL implementation.
 * 2019-04-19
 *
 * By Eli Grey, http://eligrey.com
 * By Jimmy Wärting, https://github.com/jimmywarting
 * License: MIT
 *   See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
 */

; (function () {
    var global = typeof window === 'object'
        ? window : typeof self === 'object'
            ? self : this

    var BlobBuilder = global.BlobBuilder
        || global.WebKitBlobBuilder
        || global.MSBlobBuilder
        || global.MozBlobBuilder

    global.URL = global.URL || global.webkitURL || function (href, a) {
        a = document.createElement('a')
        a.href = href
        return a
    }

    var origBlob = global.Blob
    var createObjectURL = URL.createObjectURL
    var revokeObjectURL = URL.revokeObjectURL
    var strTag = global.Symbol && global.Symbol.toStringTag
    var blobSupported = false
    var blobSupportsArrayBufferView = false
    var arrayBufferSupported = !!global.ArrayBuffer
    var blobBuilderSupported = BlobBuilder
        && BlobBuilder.prototype.append
        && BlobBuilder.prototype.getBlob

    try {
        // Check if Blob constructor is supported
        blobSupported = new Blob(['ä']).size === 2

        // Check if Blob constructor supports ArrayBufferViews
        // Fails in Safari 6, so we need to map to ArrayBuffers there.
        blobSupportsArrayBufferView = new Blob([new Uint8Array([1, 2])]).size === 2
    } catch (e) { }

    /**
     * Helper function that maps ArrayBufferViews to ArrayBuffers
     * Used by BlobBuilder constructor and old browsers that didn't
     * support it in the Blob constructor.
     */
    function mapArrayBufferViews(ary) {
        return ary.map(function (chunk) {
            if (chunk.buffer instanceof ArrayBuffer) {
                var buf = chunk.buffer

                // if this is a subarray, make a copy so we only
                // include the subarray region from the underlying buffer
                if (chunk.byteLength !== buf.byteLength) {
                    var copy = new Uint8Array(chunk.byteLength)
                    copy.set(new Uint8Array(buf, chunk.byteOffset, chunk.byteLength))
                    buf = copy.buffer
                }

                return buf
            }

            return chunk
        })
    }

    function BlobBuilderConstructor(ary, options) {
        options = options || {}

        var bb = new BlobBuilder()
        mapArrayBufferViews(ary).forEach(function (part) {
            bb.append(part)
        })

        return options.type ? bb.getBlob(options.type) : bb.getBlob()
    }

    function BlobConstructor(ary, options) {
        return new origBlob(mapArrayBufferViews(ary), options || {})
    }

    if (global.Blob) {
        BlobBuilderConstructor.prototype = Blob.prototype
        BlobConstructor.prototype = Blob.prototype
    }



    /********************************************************/
    /*               String Encoder fallback                */
    /********************************************************/
    function stringEncode(string) {
        var pos = 0
        var len = string.length
        var Arr = global.Uint8Array || Array // Use byte array when possible

        var at = 0  // output position
        var tlen = Math.max(32, len + (len >> 1) + 7)  // 1.5x size
        var target = new Arr((tlen >> 3) << 3)  // ... but at 8 byte offset

        while (pos < len) {
            var value = string.charCodeAt(pos++)
            if (value >= 0xd800 && value <= 0xdbff) {
                // high surrogate
                if (pos < len) {
                    var extra = string.charCodeAt(pos)
                    if ((extra & 0xfc00) === 0xdc00) {
                        ++pos
                        value = ((value & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000
                    }
                }
                if (value >= 0xd800 && value <= 0xdbff) {
                    continue  // drop lone surrogate
                }
            }

            // expand the buffer if we couldn't write 4 bytes
            if (at + 4 > target.length) {
                tlen += 8  // minimum extra
                tlen *= (1.0 + (pos / string.length) * 2)  // take 2x the remaining
                tlen = (tlen >> 3) << 3  // 8 byte offset

                var update = new Uint8Array(tlen)
                update.set(target)
                target = update
            }

            if ((value & 0xffffff80) === 0) {  // 1-byte
                target[at++] = value  // ASCII
                continue
            } else if ((value & 0xfffff800) === 0) {  // 2-byte
                target[at++] = ((value >> 6) & 0x1f) | 0xc0
            } else if ((value & 0xffff0000) === 0) {  // 3-byte
                target[at++] = ((value >> 12) & 0x0f) | 0xe0
                target[at++] = ((value >> 6) & 0x3f) | 0x80
            } else if ((value & 0xffe00000) === 0) {  // 4-byte
                target[at++] = ((value >> 18) & 0x07) | 0xf0
                target[at++] = ((value >> 12) & 0x3f) | 0x80
                target[at++] = ((value >> 6) & 0x3f) | 0x80
            } else {
                // FIXME: do we care
                continue
            }

            target[at++] = (value & 0x3f) | 0x80
        }

        return target.slice(0, at)
    }

    /********************************************************/
    /*               String Decoder fallback                */
    /********************************************************/
    function stringDecode(buf) {
        var end = buf.length
        var res = []

        var i = 0
        while (i < end) {
            var firstByte = buf[i]
            var codePoint = null
            var bytesPerSequence = (firstByte > 0xEF) ? 4
                : (firstByte > 0xDF) ? 3
                    : (firstByte > 0xBF) ? 2
                        : 1

            if (i + bytesPerSequence <= end) {
                var secondByte, thirdByte, fourthByte, tempCodePoint

                switch (bytesPerSequence) {
                    case 1:
                        if (firstByte < 0x80) {
                            codePoint = firstByte
                        }
                        break
                    case 2:
                        secondByte = buf[i + 1]
                        if ((secondByte & 0xC0) === 0x80) {
                            tempCodePoint = (firstByte & 0x1F) << 0x6 | (secondByte & 0x3F)
                            if (tempCodePoint > 0x7F) {
                                codePoint = tempCodePoint
                            }
                        }
                        break
                    case 3:
                        secondByte = buf[i + 1]
                        thirdByte = buf[i + 2]
                        if ((secondByte & 0xC0) === 0x80 && (thirdByte & 0xC0) === 0x80) {
                            tempCodePoint = (firstByte & 0xF) << 0xC | (secondByte & 0x3F) << 0x6 | (thirdByte & 0x3F)
                            if (tempCodePoint > 0x7FF && (tempCodePoint < 0xD800 || tempCodePoint > 0xDFFF)) {
                                codePoint = tempCodePoint
                            }
                        }
                        break
                    case 4:
                        secondByte = buf[i + 1]
                        thirdByte = buf[i + 2]
                        fourthByte = buf[i + 3]
                        if ((secondByte & 0xC0) === 0x80 && (thirdByte & 0xC0) === 0x80 && (fourthByte & 0xC0) === 0x80) {
                            tempCodePoint = (firstByte & 0xF) << 0x12 | (secondByte & 0x3F) << 0xC | (thirdByte & 0x3F) << 0x6 | (fourthByte & 0x3F)
                            if (tempCodePoint > 0xFFFF && tempCodePoint < 0x110000) {
                                codePoint = tempCodePoint
                            }
                        }
                }
            }

            if (codePoint === null) {
                // we did not generate a valid codePoint so insert a
                // replacement char (U+FFFD) and advance only 1 byte
                codePoint = 0xFFFD
                bytesPerSequence = 1
            } else if (codePoint > 0xFFFF) {
                // encode to utf16 (surrogate pair dance)
                codePoint -= 0x10000
                res.push(codePoint >>> 10 & 0x3FF | 0xD800)
                codePoint = 0xDC00 | codePoint & 0x3FF
            }

            res.push(codePoint)
            i += bytesPerSequence
        }

        var len = res.length
        var str = ''
        var i = 0

        while (i < len) {
            str += String.fromCharCode.apply(String, res.slice(i, i += 0x1000))
        }

        return str
    }

    // string -> buffer
    var textEncode = typeof TextEncoder === 'function'
        ? TextEncoder.prototype.encode.bind(new TextEncoder())
        : stringEncode

    // buffer -> string
    var textDecode = typeof TextDecoder === 'function'
        ? TextDecoder.prototype.decode.bind(new TextDecoder())
        : stringDecode

    function FakeBlobBuilder() {
        function isDataView(obj) {
            return obj && DataView.prototype.isPrototypeOf(obj)
        }
        function bufferClone(buf) {
            var view = new Array(buf.byteLength)
            var array = new Uint8Array(buf)
            var i = view.length
            while (i--) {
                view[i] = array[i]
            }
            return view
        }
        function array2base64(input) {
            var byteToCharMap = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='

            var output = []

            for (var i = 0; i < input.length; i += 3) {
                var byte1 = input[i]
                var haveByte2 = i + 1 < input.length
                var byte2 = haveByte2 ? input[i + 1] : 0
                var haveByte3 = i + 2 < input.length
                var byte3 = haveByte3 ? input[i + 2] : 0

                var outByte1 = byte1 >> 2
                var outByte2 = ((byte1 & 0x03) << 4) | (byte2 >> 4)
                var outByte3 = ((byte2 & 0x0F) << 2) | (byte3 >> 6)
                var outByte4 = byte3 & 0x3F

                if (!haveByte3) {
                    outByte4 = 64

                    if (!haveByte2) {
                        outByte3 = 64
                    }
                }

                output.push(
                    byteToCharMap[outByte1], byteToCharMap[outByte2],
                    byteToCharMap[outByte3], byteToCharMap[outByte4]
                )
            }

            return output.join('')
        }

        var create =
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue⼤数据渲染_VueDataV⼤数据可视化模板VueBigScreen vue-big-screen 基于 vue+datav+echart 框架构建的可视化数据⼤屏项⽬,star⾼达1.1K+。提供数据动态渲染、屏幕⾃适应、内部图表 ⾃由替换等功能。 ⽬录结构 安装使⽤ 更换边框 边框是使⽤了 DataV ⾃带的组件,只需要去 views ⽬录下去寻找对应的位置去查找并替换就可以,具体的种类请去 DavaV 官⽹查看。 更换图表 直接进⼊ components/echart 下的⽂件修改成你要的 echarts 模样,可以去echarts 官⽅社区⾥⾯查看案例。 屏幕适配配置 本项⽬借助了 flexible 插件,通过改变 rem 的值来进⾏适配,原设计为 1920px。 ,适配区间为:1366px ~ 2560px,本项⽬有根据 实际情况进⾏源⽂件的更改,⼩屏幕(如:宽为 1366px)。// flexible⽂件位置: `common/flexible.js`,修改部分如下function refreshRem() { var width = docEl.getBoundingClientRect().width; // 最⼩1366px,最⼤适配2560px if (width / dpr < 1366) { width = 1366 * dpr; } else if (width / dpr > 2560) { width = 2560 * dpr; } // 原项⽬是1920px我设置成24等份,这样1rem就是 80px var rem = width / 24; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;} 以上就是对这个Vue⼤屏项⽬的简单介绍,如果你想看到更详细的⽂档,那就点击下⾯的链接去看看吧! ok,就分享到这⾥。希望对⼤家有所帮助,喜欢的话可以去看下哈~

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值