• 前端表格下载/打印(可vue/可element-ui)


    1.装依赖

    npm install xlsx --save

    npm install file-saver --save
    2.组件中引入
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    3.下载表格
    //导出Excel
        exportToExcel () {
          let et = XLSX.utils.table_to_book(document.querySelector('#myTable')); //此处传入table的DOM节点
          console.log(11,et);
          let etout = XLSX.write(et, { 
            bookType: 'xlsx', 
            bookSST: true, 
            type: 'array' 
          });
          try {
              FileSaver.saveAs(new Blob([etout], { 
                  type: 'application/octet-stream' 
              }), 'trade-publish.xlsx');   //trade-publish.xlsx 为导出的文件名
          } catch (e) {
              console.log(e, etout) ;
          }
          return etout;
        },
    4.打印表格
     //打印页面内容
        printContent(){
          console.log(11);
          let wpt = document.querySelector('#myTable');
          let newContent = wpt.innerHTML;
          let oldContent = document.body.innerHTML;
          
          document.body.innerHTML = newContent;
          window.print(); //打印方法
          // window.localtion.reload();
          history.go(0)
          document.body.innerHTML = oldContent;
        }
     
    5.整体demo
    <template>
    <div class="myPage">
      <el-button @click="exportToExcel">下载表格</el-button>
      <el-button @click="printContent">打印表格</el-button>
      <div class="myTable">
        <el-table
          id="myTable"
          :height="tableHeight"
          :data="tableData"
          style=" 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </div>
      
    </div>
    </template>
    
    <script>
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    export default {
      data (){
        return {
          tableData: [
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            },  {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            },  {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }
          ],
          tableTitleData: [ 
            { label: '日期', prop: 'date' }, 
            { label: '姓名', prop: 'name' }, 
            { label: '地址', prop: 'address' } 
          ],
          tableHeight:'auto',
    
        };
      },
      methods:{
        //导出Excel
        exportToExcel () {
          let et = XLSX.utils.table_to_book(document.querySelector('#myTable')); //此处传入table的DOM节点
          console.log(11,et);
          let etout = XLSX.write(et, { 
            bookType: 'xlsx', 
            bookSST: true, 
            type: 'array' 
          });
          try {
              FileSaver.saveAs(new Blob([etout], { 
                  type: 'application/octet-stream' 
              }), 'trade-publish.xlsx');   //trade-publish.xlsx 为导出的文件名
          } catch (e) {
              console.log(e, etout) ;
          }
          return etout;
        },
        //打印页面内容
        printContent(){
          console.log(11);
          let wpt = document.querySelector('#myTable');
          let newContent = wpt.innerHTML;
          let oldContent = document.body.innerHTML;
          
          document.body.innerHTML = newContent;
          window.print(); //打印方法
          // window.localtion.reload();
          history.go(0)
          document.body.innerHTML = oldContent;
        },
    
      },
      mounted(){},
    }
    
    </script>
    <style lang='less' scoped>
    .myPage{
      overflow-y: scroll;  
    }
    .myTable{
       800px;
      
    }
    </style>
    

      



  • 相关阅读:
    rabbitmq在centos7下安装
    跨域问题
    11生成器相关及推导式(附内置函数分析图url)
    10函数名的应用,闭包,和迭代器
    09函数的动态传参及global和nonlocal关键字
    08函数简介
    07基本的文件操作
    06set集合和深浅拷贝(包括前面的一些知识点补充)
    05判断和编码/解码
    04基本数据类型(字典)
  • 原文地址:https://www.cnblogs.com/miaSlady/p/12156003.html
Copyright © 2020-2023  润新知