Vue前端實現excel的導入、導出、打印功能

這篇具有很好參考價值的文章主要介紹了Vue前端實現excel的導入、導出、打印功能。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一、相關依賴下載

導入導出依賴：
npm install xlsx@0.16.9
npm install xlsx-style@0.8.13 --save

安裝xlsx-style，運行報錯
This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

解決報錯
在\node_modules\xlsx-style\dist\cpexcel.js 807行的var cpt = require('./cpt' + 'able');改為：var cpt = cptable;

打印依賴：
npm install vue-print-nb@1.7.5 --save

二、excel導入功能

<template>
  <div>
    <el-upload
      action="#"
      :before-upload="beforeUpload"
      :show-file-list="false"
      accept=".xlsx, .xls"
    >
      <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
    </el-upload>
    <!-- 解析出來的數據 -->
    <el-table :data="tableData">
      <el-table-column prop="日期" label="日期" width="180"> </el-table-column>
      <el-table-column prop="姓名" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="地址" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  name: 'importExcel',
  data () {
    return {
      tableData: [],
    }
  },
  methods: {
    beforeUpload (file) {
      console.log(file, '--文件');
      this.file2XLSX(file).then((res) => {
        console.log('可以繼續(xù)對res數據進行二次處理')
        this.tableData = res[0].sheet
      })
      return false
    },
    // excel導入方法
    file2XLSX (file) {
      return new Promise(function (resolve, reject) {
        // 通過FileReader對象讀取文件
        const reader = new FileReader()
        // 讀取為二進制字符串
        reader.readAsBinaryString(file)
        reader.onload = function (e) {
          console.log(e, '讀取文件成功的e');
          // 獲取讀取文件成功的結果值
          const data = e.target.result
          // XLSX.read解析數據，按照type 的類型解析
          let wb = XLSX.read(data, {
            type: 'binary' // 二進制
          })
          console.log(wb, '---->解析后的數據')
          // 存儲獲取到的數據
          const result = []
          // 工作表名稱的有序列表
          wb.SheetNames.forEach(sheetName => {
            result.push({
              // 工作表名稱
              sheetName: sheetName,
              // 利用 sheet_to_json 方法將 excel 轉成 json 數據
              sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName]) 
            })
          })
          resolve(result)
        }
      })
    }
  },
}
</script>

三、table導出excel表格

1.導出行數據

2.導出table數據(也會導出合并單元格）

3.導出二維數據的table數據

4.導出合并單元格table數據

<template>
  <div>
    <el-button type="primary" @click="exportSelectData"
      >導出行數據（json_to_sheet）</el-button
    >
    <el-button type="primary" @click="exportTableData"
      >導出table數據(也會導出合并單元格）（table_to_sheet）</el-button
    >
    <el-button type="primary" @click="exportTableDataFormAoa"
      >導出二維數據的table數據（aoa_to_sheet）</el-button
    >
    <el-button type="primary" @click="exportTableDataCellMerging"
      >導出合并單元格table數據（aoa_to_sheet）</el-button
    >
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="tableDataRef"
      id="table1"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <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>
</template>

<script>
import XLSX from 'xlsx'
export default {
  name: 'importExcel',
  data () {
    return {
      selectionList: [],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    // 獲取選擇的行數據
    handleSelectionChange (val) {
      this.selectionList = val;
      console.log(this.selectionList, '--行數據');
    },
    // 導出選擇的行數據
    exportSelectData () {
      // 對選擇的表格數據處理：添加標題
      let arr = this.selectionList.map(item => {
        return {
          日期: item.date,
          姓名: item.name,
          地址: item.address
        }
      })
      // 將json數據變?yōu)閟heet數據
      // json_to_sheet: 將一個由對象組成的數組轉成sheet；
      let sheet = XLSX.utils.json_to_sheet(arr)
      // 新建表格
      let book = XLSX.utils.book_new()
      // 在表格中插入一個sheet
      XLSX.utils.book_append_sheet(book, sheet, "sheet1")
      // 通過xlsx的writeFile方法將文件寫入
      XLSX.writeFile(book, `user${new Date().getTime()}.xls`)
    },
    // 導出table數據
    exportTableData () {
      // 獲取dom元素（2種方式）
      // let table1 = document.querySelector("#table1");  // 原生dom
      let table = this.$refs.tableDataRef.$el
      // table_to_sheet: 將一個table dom直接轉成sheet，會自動識別colspan和rowspan并將其轉成對應的單元格合并；
      let sheet = XLSX.utils.table_to_sheet(table)
      let book = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(book, sheet, "sheet1")
      XLSX.writeFile(book, `user${new Date().getTime()}.xls`)
    },
    // 導出一個二維數組
    exportTableDataFormAoa () {
      let aoa = [
        ['姓名', '性別', '年齡', '注冊時間'],
        ['張三', '男', 18, new Date()],
        ['李四', '女', 22, new Date()]
      ];
      // 將一個二維數組轉成sheet
      // aoa_to_sheet: 這個工具類最強大也最實用了，將一個二維數組轉成sheet，會自動處理number、string、boolean、date等類型數據；
      let sheet = XLSX.utils.aoa_to_sheet(aoa);
      let book = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(book, sheet, "sheet1")
      XLSX.writeFile(book, `user${new Date().getTime()}.xls`)
    },
    // 導出合并單元格的table數據
    exportTableDataCellMerging () {
      let aoa = [
        ['主要信息', null, null, '其它信息'], // 特別注意合并的地方后面預留2個null
        ['姓名', '性別', '年齡', '注冊時間'],
        ['張三', '男', 18, new Date()],
        ['李四', '女', 22, new Date()]
      ];
      let sheet = XLSX.utils.aoa_to_sheet(aoa);
      // 設置合并的單元格
      sheet['!merges'] = [
        // 設置A1-C1的單元格合并
        { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }
      ];
      let book = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(book, sheet, "sheet1")
      XLSX.writeFile(book, `user${new Date().getTime()}.xls`)
    }
  }
}
</script>

參考

對sheet二次處理的參考:
https://blog.csdn.net/tian_i/article/details/84327329

四、table導出excel表格（帶樣式）

1.導出帶樣式的excel

<template>
  <div>
    <el-button @click="exportExcel()">導出帶樣式的excel</el-button>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style';

export default {
  name: 'exportExcelStyle',
  methods: {
    exportExcel () {
      let data = [['時間', '電壓'], ['2021-12-01 08:57:12', '3.14'], ['2021-12-01 08:58:20', '3.15']];
      let titles = ['時間', '電壓']
      var sheet = XLSX.utils.json_to_sheet(data, {
        skipHeader: true,
      });
      /**設置標題頭背景色 */
      for (const key in sheet) {
        // 第一行，表頭
        if (key.replace(/[^0-9]/ig, '') === '1') {
          sheet[key].s = {
            fill: { //背景色
              fgColor: { rgb: 'C0C0C0' }
            },
            font: {//字體
              name: '宋體',
              sz: 12,
              bold: true
            },
            border: {//邊框
              bottom: {
                style: 'thin',
                color: 'FF000000'
              }
            },
            alignment: {
              horizontal: 'center' //水平居中
            }
          }
        }
        // 指定單元格樣式
        if (key === 'A1') {
          sheet[key].s = {
            ...sheet[key].s,
            fill: { //背景色
              fgColor: { rgb: 'E4DFEC' }
            }
          }
        }
        // 列寬
        let colsP = titles.map(item => {
          let obj = {
            'wch': 25 //列寬
          }
          return obj;
        })
        sheet['!cols'] = colsP;//列寬

        // // 每列的列寬
        // sheet["!cols"] = [{
        //   wpx: 70 //單元格列寬
        // }, {
        //   wpx: 70
        // }, {
        //   wpx: 70
        // }, {
        //   wpx: 70
        // }, {
        //   wpx: 150
        // }, {
        //   wpx: 120
        // }];
      }
      let fileName = 'Excel文件.xlsx'
      let sheetName = 'Excel文件'
      this.openDownload(this.sheet2blob(sheet, sheetName), fileName);
    },
    sheet2blob (sheet, sheetName) {
      let wb = XLSX.utils.book_new();
      wb.SheetNames.push(sheetName)
      wb.Sheets[sheetName] = sheet;
      // 必須使用xlsx-style才能生成指定樣式
      var wbout = XLSXStyle.write(wb, { bookType: '', bookSST: false, type: 'binary' })
      var blob = new Blob([s2ab(wbout)], { type: "" }, sheetName);
      // 字符串轉ArrayBuffer
      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;
      }
      return blob;
    },
    openDownload (url, saveName) {
      if (typeof url == "object" && url instanceof Blob) {
        url = URL.createObjectURL(url); // 創(chuàng)建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = saveName || ""; // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，file:///模式下不會生效
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    }
  },
}
</script>

2. 結合el-table，根據勾選的內容，導出excel表格

html和css就不寫了，主要記錄下js功能實現的過程

// 導出函數
export async function exportBtn (payloadList) {
  // payloadList是table表格勾選的內容數組
  if (payloadList.length === 0) {
    this.$message({
      type: 'warning',
      message: '請選擇要導出的記錄!'
    })
  } else {
    // 最終生成sheet的aoelist
    let finalList = []
    // 一、準備枚舉值
    // 1.寫死
    let ywlxenum = [
      { label: '預審選址', value: 'YSXZ' },
      { label: '土地儲備', value: 'TDCBGM' },
      { label: '農轉用報批', value: 'YDBP' },
      { label: '規(guī)劃條件', value: 'GHTJ' },
      { label: '行政劃撥', value: 'XZHB' },
      { label: '公開出讓', value: 'GKCR' },
      { label: '建設用地規(guī)劃許可', value: 'JSYDGHXK' },
      { label: '建設工程規(guī)劃類許可證核發(fā)', value: 'JSGCGHXK' },
      { label: '建設工程竣工規(guī)劃核實', value: 'JGGHHY' },
      { label: '竣工驗收備案', value: 'JGYSBA' }
    ]
    // 2.通過請求獲取
    let ydxzenum = []
    await getEnumByValue({ value: 'TDLYXZ' }).then(data => {
      ydxzenum = mapListFunc(data.fieldEnum)
    })
    // 二、通過請求獲取數據
    let resList = [] // 保存請求數據
    for (let i = 0; i < payloadList.length; i++) {
      await this.queryInfo({ id: payloadList[i].xmguid }).then(res => {
      	// 這里是判斷了返回值里還包含了list數組
        if (res.data.bizGhtjGhqkList.length !== 0) {
          let bizGhtjGhqkList = res.data.bizGhtjGhqkList
          bizGhtjGhqkList.forEach(item => {
            resList.push({ ...res.data.bizSlsq, ...res.data.bizGhtj, ...item })
          })
        } else {
          resList.push({ ...res.data.bizSlsq, ...res.data.bizGhtj })
        }
      })
    }
    // 三、映射關系list
    let mappingList = [
      { field: 'xmmc', value: '項目名稱', merge: true }, // merge代表單元格是否合并
      { field: 'ydxz', value: '用地性質', enum: true, merge: true }, // enum代表是否是枚舉值
      { field: 'dkbh', value: '地塊編號' },
    ]
    // 四、添加標題
    let titleList = []
    mappingList.forEach(item => {
      titleList.push(item.value)
    })
    finalList.push(titleList)
    // 五、添加內容
    resList.forEach(row => {
      // 行的list
      let ctnList = []
      let hyfltemp = []
      let ydxztemp = []
      mappingList.forEach(item => {
        if (item.enum) {
          // 帶枚舉值的處理
          switch (item.field) {
            case 'hyfl':
              hyfltemp = row[item.field] && row[item.field].split(',')
              ctnList.push(queryEnumVal(hyflenum, hyfltemp && hyfltemp[(hyfltemp.length - 1)]))
              break
            case 'ydxz':
              ydxztemp = row[item.field] && row[item.field].split(',')
              ctnList.push(queryEnumVal(ydxzenum, ydxztemp && ydxztemp[(ydxztemp.length - 1)]))
              break
            case 'pzjg':
              ctnList.push(queryEnumVal(pzjgenum, row[item.field]))
              break
            case 'ywlx':
              ctnList.push(queryEnumVal(ywlxenum, row[item.field]))
              break
            case 'cbywlx':
              ctnList.push(queryEnumVal(cbywlxenum, row[item.field]))
              break
            default:
              break
          }
        } else {
          // 常規(guī)
          ctnList.push(row[item.field])
        }
      })
      finalList.push(ctnList)
    })
    // 六、處理合并單元格
    let mergeArr = []
    let { indices } = unipFunc(resList, 'xmguid')
    mappingList.forEach((item, index) => {
      if (item.merge) {
        indices.forEach(itemlist => {
          if (itemlist.length > 1) {
            mergeArr.push({
              s: { r: itemlist[0] + 1, c: index },
              e: { r: itemlist[itemlist.length - 1] + 1, c: index }
            })
          }
        })
      }
    })
    // 七、生成sheet
    let sheet = XLSX.utils.aoa_to_sheet(finalList)
    // 八、合并單元格和添加樣式
    sheet['!merges'] = mergeArr
    Object.keys(sheet).forEach((item, index) => {
      if (sheet[item].t) {
        sheet[item].s = { // 對齊方式相關樣式
          alignment: {
            vertical: 'center', // 垂直對齊方式
            horizontal: 'center' // 水平對齊方式
            // wrapText: true // 自動換行
          }
        }
      }
    })
    // 九、導出excel
    openDownloadDialog(sheet2blob(sheet), new Date().getTime() + '.xlsx' || '表名.xlsx')
  }
}

function queryEnumVal (enumList, field) {
  // 獲取枚舉值對應的key
  let enumVal = ''
  enumList.forEach(item => {
    if (item.value === field) {
      enumVal = item.label
    }
  })
  return enumVal
}
function mapListFunc (params) {
  // 處理枚舉值
  let list = []
  list = params.map(item => {
    item.value = item.enumValue
    item.label = item.enumName
    return item
  })
  return list
}
// 處理數據重復值
function unipFunc (list, objKey) {
  let key = {} // 存儲的 key 是type的值，value是在indeces中對應數組的下標
  let indices = [] // 數組中每一個值是一個數組，數組中的每一個元素是原數組中相同type的下標
  list.map((item, index) => {
  // 根據對應字段 分類（type）
    let itemKey = item[objKey]
    let _index = key[itemKey]
    if (_index !== undefined) {
      indices[_index].push(index)
    } else {
      key[itemKey] = indices.length
      indices.push([index])
    }
  })
  // 歸類結果
  let result = []
  let resultIndex = []
  indices.map((item) => {
    item.map((index) => {
      if (item.length > 1) {
        result.push(list[index])
        resultIndex.push(index)
      }
    })
  })
  return { result, resultIndex, indices }
}
// 下載excel
function openDownloadDialog (url, saveName) {
  if (typeof url === 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url) // 創(chuàng)建blob地址
  }
  var aLink = document.createElement('a')
  aLink.href = url
  aLink.download = saveName || '' // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，file:///模式下不會生效
  var event
  if (window.MouseEvent) event = new MouseEvent('click')
  else {
    event = document.createEvent('MouseEvents')
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  }
  aLink.dispatchEvent(event)
}
// 字符串轉ArrayBuffer
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
}
// 將一個sheet轉成最終的excel文件的blob對象，然后利用URL.createObjectURL下載
function sheet2blob (sheet, sheetName) {
  sheetName = sheetName || 'sheet1'
  let workbook = XLSX.utils.book_new()
  workbook.SheetNames.push(sheetName)
  workbook.Sheets[sheetName] = sheet
  // 生成excel的配置項
  var wopts = {
    bookType: 'xlsx', // 要生成的文件類型
    bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性
    type: 'binary'
  }
  var wbout = XLSXStyle.write(workbook, wopts)
  var blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })

  return blob
}

參考文章來源地址http://www.zghlxwxcb.cn/news/detail-401536.html

帶樣式的導出參考代碼:
https://blog.csdn.net/weixin_39246975/article/details/121639072

別人對xlsx-style的二次封裝:
https://blog.csdn.net/weixin_51947053/article/details/127370479

五、打印功能

1.直接使用window自帶的打印功能： window.print()

<template>
  <div>
    <p>點擊下面的按鈕，可將頁面進行打印</p>
    <div id="printDiv">
      <p>打印內容 </p>
      <p>打印內容 </p>
      <p>打印內容 </p>
      <p>打印內容 </p>
    </div>
    <button @click="print">打印頁面內容</button>
  </div>
</template>

<script>
  export default{
    methods: {
      print(){
        window.print()
      }
    }
  }
</script>

2.使用打印插件：vue-print-nb

1、安裝 vue-print-nb:

// vue2.x 版本
npm install vue-print-nb --save   
// vue3.x 版本
npm install vue3-print-nb --save

2、在項目中引入 vue-print-nb:

// vue2.x版本 -- 全局引入：在項目中入口文件 main.js 文件中全局引入 vue-print-nb
import Vue from 'vue'
import Print from 'vue-print-nb'
Vue.use(Print)

// 局部引入報錯，還不知道咋解決，建議是全局引入
// vue2.x版本 -- 在需要打印功能的頁面引入 vue-print-nb
import print from 'vue-print-nb'
export default{
    directives: { print }
}

// vue3.x版本 -- 全局引入：在項目中入口文件 main.js 文件中全局引入 vue3-print-nb
import {createApp} from 'vue'
import App from './App'
import Print from 'vue3-print-nb'
const app = createApp(App)
app.use(Print)
app.mount('#app')

// vue3.x版本 -- 在需要打印功能的頁面引入 vue3-print-nb
import print from 'vue3-print-nb'
export default{
    directives: { print }
}

3、使用 vue-print-nb 實現打印功能

① 實現方式1：打印區(qū)域設置id, 打印按鈕綁定此 id

<template>
  <div>
    <p>點擊下面的按鈕，可將div里的內容區(qū)域進行打印</p>

    <div id="printDiv">
      <p>打印內容 </p>
      <p>打印內容 </p>
      <p>打印內容 </p>
      <p>打印內容 </p>
    </div>

    <button v-print="'#printDiv'">打印id為printDiv的div區(qū)域內容</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{}
    }
  }
</script>

② 實現方式2：打印區(qū)域設置id, 打印按鈕進行打印配置

<template>
  <div>
    <p>點擊下面的按鈕，可將div里的內容區(qū)域進行打印</p>

    <div id="printDiv">
      <p>打印內容 </p>
      <p>打印內容 </p>
      <p>打印內容 </p>
      <p>打印內容 </p>
    </div>

    <button v-print="'printSet'">打印id為printDiv的div區(qū)域內容</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        printSet: {
          id: 'printDiv',
          extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
          beforeOpenCallback (vue) {
            console.log('打開之前')
          },
          openCallback (vue) {
            console.log('執(zhí)行了打印')
          },
          closeCallback (vue) {
             console.log('關閉了打印工具')
          }
        }
      }
    }
  }
</script>

③ 打印網址：打印指定url(同一個同源策略)對應的內容

<template>
    <button v-print="'printSet'">打印網址</button>
</template>

<script>
  export default{
    data(){
      return{
        printSet: {
          url: 'http://localhost:8080/',
          beforeOpenCallback (vue) {
            console.log('打開之前')
          },
          openCallback (vue) {
            console.log('執(zhí)行了打印')
          },
          closeCallback (vue) {
             console.log('關閉了打印工具')
          }
        }
      }
    }
  }
</script>

④ 打印預覽功能

<template>
    <button v-print="'printSet'">打印+預覽功能</button>
</template>

<script>
  export default{
    data(){
      return{
        printSet: {
          url: 'http://localhost:8080/', // 打印網頁預覽  如果想要打印本地預覽，那么可以不用提供url,需提供打印區(qū)域的id，例如： id: 'printDiv'
          preview: true,
          previewTitle: 'Test Title',
          previewBeforeOpenCallback (vue) {
            console.log('正在加載預覽窗口')
          },
          previewOpenCallback (vue) {
            console.log('已經加載完預覽窗口')
          },
          beforeOpenCallback (vue) {
            console.log('打開之前')
          },
          openCallback (vue) {
            console.log('執(zhí)行了打印')
          },
          closeCallback (vue) {
             console.log('關閉了打印工具')
          }
        }
      }
    }
  }
</script>

⑤ 打印異步url

<template>
    <button v-print="'printSet'">打印+預覽功能</button>
</template>

<script>
  export default{
    data(){
      return{
        printSet: {
          asyncUrl (reslove, vue) {
             setTimeout(() => {
                reslove('http://localhost:8080/')
             }, 2000)
            }, // 異步url
          preview: true,
          previewTitle: 'Test Title',
          previewBeforeOpenCallback (vue) {
            console.log('正在加載預覽窗口')
          },
          previewOpenCallback (vue) {
            console.log('已經加載完預覽窗口')
          },
          beforeOpenCallback (vue) {
            console.log('打開之前')
          },
          openCallback (vue) {
            console.log('執(zhí)行了打印')
          },
          closeCallback (vue) {
             console.log('關閉了打印工具')
          }
        }
      }
    }
  }
</script>

⑥ 實現區(qū)域不打印方式

<template>
    <div>
        <div ref="printDiv">
            <p>打印內容區(qū)域</p>
            <p>打印內容區(qū)域</p>
            <p>打印內容區(qū)域</p>
            <p>打印內容區(qū)域</p>
            <p>打印內容區(qū)域</p>
    

            實現區(qū)域不打印方式1：設置class為 no-print 即可實現該區(qū)域不打印
            <p class="no-print">不要打印的內容區(qū)域</p>

            // 實現區(qū)域不打印方式2: 自定義不打印區(qū)域的class名
            <p class="do-not-print-div">不要打印的內容區(qū)域</p>
        </div> 

        <button @click="printBtnClick">打印按鈕</button>       
    </div>
</template>

<script>
export default{
    data(){
        return {}
    },
    methods:{
        printBtnClick(){
            // 注意必須使用ref指定打印區(qū)域，如果通過id或者class，那么wenpack打包后打印區(qū)域會為空
            this.$print(this.$refs.printDiv) 

            // 實現區(qū)域不打印方式2
            this.$print(this.$refs.print, { noPrint: '.do-not-print-div' }) 
        },
    }
}
</script>

⑦ vue-print-nb的API配置如下

1、id: String // 范圍打印 ID，必填值

2、standard: String   // 文檔類型（僅打印本地范圍）

3、extraHead: String // <head></head>在節(jié)點中添加DOM節(jié)點，并用,(Print local range only)分隔多個節(jié)點

4、extraCss: String  // <link>新的 CSS 樣式表，并使用,（僅打印本地范圍）分隔多個節(jié)點

5、popTitle: String // <title></title> 標簽內容（僅打印局部范圍）

6、openCallback: Function // 調用打印工具成功回調函數

7、closeCallback: Function // 關閉打印工具成功回調函數

8、beforeOpenCallback: Function // 調用打印工具前的回調函數

9、url: String // 打印指定的 URL。（不允許同時設置ID）

10、asyncUrl: Function // 異步網址：通過 'resolve()' 和 Vue 返回 URL

11、preview: Boolean // 預覽

12、previewTitle: String // 預覽標題

13、previewPrintBtnLabel: String // 預覽按鈕的名稱

14、zIndex: String,Number // 預覽CSS：z-index

15、previewBeforeOpenCallback: Function // 啟動預覽工具前的回調函數

16、previewOpenCallback: Function // 預覽工具完全打開后的回調函數

17、clickMounted: Function //點擊打印按鈕的回調函數

到了這里，關于Vue前端實現excel的導入、導出、打印功能的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網

Vue前端實現excel的導入、導出、打印功能

一、相關依賴下載

二、excel導入功能

三、table導出excel表格

1.導出行數據

2.導出table數據(也會導出合并單元格）

3.導出二維數據的table數據

4.導出合并單元格table數據

四、table導出excel表格（帶樣式）

1.導出帶樣式的excel

2. 結合el-table，根據勾選的內容，導出excel表格

五、打印功能

1.直接使用window自帶的打印功能： window.print()

2.使用打印插件：vue-print-nb

1、安裝 vue-print-nb:

2、在項目中引入 vue-print-nb:

3、使用 vue-print-nb 實現打印功能

① 實現方式1：打印區(qū)域設置id, 打印按鈕綁定此 id

② 實現方式2：打印區(qū)域設置id, 打印按鈕進行打印配置

③ 打印網址：打印指定url(同一個同源策略)對應的內容

④ 打印預覽功能

⑤ 打印異步url

⑥ 實現區(qū)域不打印方式

⑦ vue-print-nb的API配置如下

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

二維碼2

Vue前端實現excel的導入、導出、打印功能

一、相關依賴下載

二、excel導入功能

三、table導出excel表格

1.導出行數據

2.導出table數據(也會導出合并單元格）

3.導出二維數據的table數據

4.導出合并單元格table數據

四、table導出excel表格（帶樣式）

1.導出帶樣式的excel

2. 結合el-table，根據勾選的內容，導出excel表格

五、打印功能

1.直接使用window自帶的打印功能： window.print()

2.使用打印插件：vue-print-nb

1、安裝 vue-print-nb:

2、在項目中引入 vue-print-nb:

3、使用 vue-print-nb 實現打印功能

① 實現方式1：打印區(qū)域設置id, 打印按鈕綁定此 id

② 實現方式2：打印區(qū)域設置id, 打印按鈕進行打印配置

③ 打印網址：打印指定url(同一個同源策略)對應的內容

④ 打印預覽功能

⑤ 打印異步url

⑥ 實現區(qū)域不打印方式

⑦ vue-print-nb的API配置如下

相關文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

二維碼2

Vue前端實現excel的導入、導出、打印功能

一、相關依賴下載

二、excel導入功能

三、table導出excel表格

四、table導出excel表格（帶樣式）

2. 結合el-table，根據勾選的內容，導出excel表格

五、打印功能

1、安裝 vue-print-nb:

2、在項目中引入 vue-print-nb:

3、使用 vue-print-nb 實現打印功能

支付寶掃一掃領取紅包，優(yōu)惠每天領