最新Vue前端实现excel的导入、导出、打印功能_前端打印excel，前端开发社招面试解答之性能优化

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

> 
> **参考**
> 
> 
> 1. 对sheet二次处理的参考:  
>  <https://blog.csdn.net/tian_i/article/details/84327329>
> 
> 
> 


## 四、table导出excel表格（带样式）


### 1.导出带样式的excel

### 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: ‘规划条件’, value: ‘GHTJ’ },
{ label: ‘行政划拨’, value: ‘XZHB’ },
{ label: ‘公开出让’, value: ‘GKCR’ },
{ label: ‘建设用地规划许可’, value: ‘JSYDGHXK’ },
{ label: ‘建设工程规划类许可证核发’, value: ‘JSGCGHXK’ },
{ label: ‘建设工程竣工规划核实’, 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 {
// 常规
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) // 创建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
}

> 
> **参考**
> 
> 
> 1. 带样式的导出参考代码:  
>  <https://blog.csdn.net/weixin_39246975/article/details/121639072>
> 2. 别人对xlsx-style的二次封装:  
>  <https://blog.csdn.net/weixin_51947053/article/details/127370479>
> 
> 
> 


## 五、打印功能


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

点击下面的按钮，可将页面进行打印

打印内容

打印内容

打印内容

打印内容

### 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：打印区域设置id, 打印按钮绑定此 id

点击下面的按钮，可将div里的内容区域进行打印

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

<button v-print="'#printDiv'">打印id为printDiv的div区域内容</button>