Vue实现数据表格的打印、导入、导出

数据表格打印

一、实现当前页面数据打印

利用 vue-print-nb 插件

• 1.安装

  npm install vue-print-nb --save
  

• 2.引入

  // 在main.js文件中引入
  import Print from 'vue-print-nb'
  Vue.use(Print)
  

• 3.使用

  • HTML部分

    <template>
        <button v-print="printObj">打印</button>
    
        <el-table id="mytable">
            ....
        </el-table>
    </template>
    

  • JavaScript部分

    export default {
        data() {
            return {
                printObj: {
                  id: "mytable",
                  popTitle: '打印的标题',
                }
            };
        }
    }
    

• 4.效果

  

二、实现全部页面数据打印

利用 print-js 插件

• 1.安装

  npm install print-js --save
  

• 2.引入

  // 在当前使用的vue文件内引用
  import printJS from 'print-js'
  

• 3.使用

  • HTML部分

    <template>
        <button @click="printAll">打印</button>
    
        <el-table>
            ....
        </el-table>
    </template>
    

  • JavaScript部分

    export default {
        data() {
            return {
                
            }
        }，
        methods:{
        	async printAll(){
                const res = await getdata();
                this.list = res.data || [];
                let data = []
                for (let i=0; i < this.list.length; i++) {
                    data.push({
                        "field1": this.list[i].field1,
                        "field2": this.list[i].field2,
                        "field3": this.list[i].field3,
                        ...
                    })
                }
                              
                printJS({
                    printable: data,
                    properties: [
                        {
                            field: 'field1',
                            displayName: '第一个字段',
                            columnSize: 1
                        },
                        {
                            field: 'field2',
                            displayName: '第二个字段',
                            columnSize: 1
                        },
                        {
                            field: 'field3',
                            displayName: '第三个字段',
                            columnSize: 1
                        },
    					...
                    ],
                    type: 'json',
                    header: '打印的标题',
                    // 样式设置
                    gridStyle: 'border: 2px solid #3971A5;',
                    gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;'
                })
            }
    	}
    }
    

• 4.效果

  

数据表格导入

一、HTML代码编写

<template>
    <div>
        <el-upload class="upload-demo" action="" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                   :on-change="handleExcelFileChange" 
                   :on-exceed="handleExcelFileExceed" 
                   :on-remove="handleExcelFileRemove"
                   :file-list="excelFileList" 
                   :limit="1" 
                   :auto-upload="false">
            <el-button size="small" type="warning" plain>选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传 xlsx/xls 类型的文件</div>
        </el-upload>
        <el-button type="success" @click="handleImport()" round>导入数据</el-button>
    </div>
</template>

二、JavaScript代码编写

import {
    parseExcel
} from '@/utils/excelUtil.js'

export default {
    data() {
        return {
            excelFileList: [],
        	excelFile: null
        }
    }，
    methods:{
        handleExcelFileChange(file, fileList) {
            this.excelFile = file.raw
        },
        handleExcelFileRemove(file, fileList) {
            this.excelFile = null
        },
        handleExcelFileExceed(file, fileList) {
            this.tip("error", "一次只能导入一个文件的数据！")
       	},
        handleImport() {
            var that = this

            if (this.excelFile) {
                if ((this.excelFile.type == 
                     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
                    || (this.fileTemp.type == 'application/vnd.ms-excel')) {
                    
                    parseExcel(this.excelFile).then((res) => {
                        console.log(res.data) // 获取解析到的数据
                        
                    })
                } else {
                    this.tip("warning", "附件格式错误，请重新选择！")
                }
            } else {
                this.tip("warning", "请选择要导入的附件！")
            }
        },
        tip(type, message) {
            if (type !== "info") {
                this.$message({
                    message: message,
                    showClose: true,
                    type: type
                })
            } else {
                this.$message({
                    message: message,
                    showClose: true
                })
            }
        }
      }
	}
}

三、导入数据表格JS代码编写

// 解析Excel文件工具
export function parseExcel(obj) {
	let promise = new Promise(function(resolve, reject) {
		var rABS = false; // 是否将文件读取为二进制字符串
		var f = obj;
		var reader = new FileReader();
		
		FileReader.prototype.readAsBinaryString = function(f) {
			var binary = "";
			var rABS = false; //是否将文件读取为二进制字符串
			var pt = this;
			var wb; //读取完成的数据
			var outdata;
			var reader = new FileReader();
		
			reader.onload = function(e) {
				var bytes = new Uint8Array(reader.result);
				var length = bytes.byteLength;
		
				for (var i = 0; i < length; i++) {
					binary += String.fromCharCode(bytes[i]);
				}
		
				var XLSX = require('xlsx');
				if (rABS) {
					wb = XLSX.read(btoa(fixdata(binary)), {
						type: 'base64'
					});
				} else {
					wb = XLSX.read(binary, {
						type: 'binary'
					});
				}
		
				outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
				this.da = [...outdata]
				let arr = []
				this.da.map(v => {
					let obj = {}
                    obj.field1 = v['列标题1']
					obj.field2 = v['列标题2']
                    obj.field3 = v['列标题3']
                    ...
                    
					arr.push(obj)
				})
				
				resolve(arr)
			}
			reader.readAsArrayBuffer(f);
		}
		
		if (rABS) {
			reader.readAsArrayBuffer(f);
		} else {
			reader.readAsBinaryString(f);
		}
	})
	
	return promise
}

数据表格导出

一、安装相应插件

# 用来生成文件的web应用程序
npm install -S file-saver 
# 电子表格格式的解析器
npm install -S xlsx 
# 用于将上面引入的js文件挂在全局下
npm install -D script-loader 

二、导入依赖文件

需要依赖两个相关的JS文件，将它们放在同一级目录中。

文件下载地址

三、修改JS文件

修改Export2Excel.js文件

require('script-loader!file-saver');
require('script-loader!./Blob');
require('script-loader!xlsx/dist/xlsx.core.min');

四、代码编写使用

• HTML部分

  <template>
      <button @click="handleDownload">导出</button>
  
      <el-table>
          ....
      </el-table>
  </template>
  

• JavaScript部分

  export default {
      data() {
          return {
              
          }
      }，
      methods:{
      	handleDownload() {
              	// 引入Export2Excel.js文件的指定函数
                  const {export_json_to_excel} = require('Export2Excel.js的文件地址')
                  // 设置列标题
                  const tHeader = ['标题1', '标题2', '标题3', ...]
                 	// 设置列字段
          		const filterVal = ['field1', 'field2', 'field3', ...]
                  // 需要导出的数据列表
                  const list = getData() 
                  // 进行转换
                  const data = list.map(v => filterVal.map(j => v[j]))
                  // 导出数据
                  export_json_to_excel(tHeader, data, '导出的文件名')
              })
          }
  	}
  }