页面中先加上这些
<template>
    <div>
        <div id='content'>
            开始日期<input type='text' v-model='excelBegin'>
            结速日期<input type='text' v-model='excelEnd'>
            <table>内容</table>
        </div>
        <button>导出</button>
    </div>
</template>
<script>
    var idTmr;
    function method1(tableid) {//整个表格拷贝到EXCEL中
        tableToExcel(tableid)
    }
    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }
    var tableToExcel;

var vm = new Vue({
    el:'#app',
    data:{
        excelBegin:'2018-01-01',
        excelEnd:'2018-01-30'
    },
    methods:{
        excelDownload(){
            methodl(id)
        }
    },
    mounted:function(){
        tableToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,',
                template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso' +
                    ' 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>' +
                    '<style>.cell{text-align: center}</style>'+
                    '<body style="text-align: center!important;">' +
                    '<table>' +
                    '<h1 style="text-align: center">统计</h1>' +
                    '<h3>' +
                    '<tr style="height: 30;background:#ccc;color: #fff;">' +
                    '<td style="width:200px;font-size: 20px;">开始时间:</td>' +
                    '<td style="width:200px;font-size: 20px;text-align: left">{begin}</td>' +
                    '<td style="width:200px;font-size: 20px;">结束时间:</td>' +
                    '<td style="width:200px;font-size: 20px;text-align: left">{end}</td>' +
                    '</tr>' +
                    '</h3>' +
                    '{table}</table>' +
                    '</body></html>',
                base64 = function (s) {
                    return window.btoa(unescape(encodeURIComponent(s)))
                },
                format = function (s, c) {
                    return s.replace(/{(\w+)}/g,
                        function (m, p) {
                            return c[p];
                        })
                }
            return function (table, name) {
                console.log(vm.formData4.begin)
                if (!table.nodeType) table = document.getElementById(table)
                console.log(table.innerHTML)
                var ctx = {
                    worksheet: name || 'Worksheet',
                    table: table.innerHTML,
                    begin: vm.excelBegin,
                    end: vm.excelEnd
                }
                window.location.href = uri + base64(format(template, ctx))
            }
        })()
    }
})
</script>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue