vue 借助插件js-table2excel 实现导出excel，并导出图片到excel
- 安装
npm install js-table2excel（yarn add js-table2excel） - 导入
import table2excel from 'js-table2excel' - 使用：
点击查看代码
exportToExcel() { //导出excel表
const self = this
let tableColumn = [{
title: 'ID',
key: 'id',
type: 'text'
}, {
title: '姓名',
key: 'name',
type: 'text'
}, {
title: '性别',
key: 'gender',
type: 'text'
}, {
title: '证件照',
key: 'id_photo',
type: 'image'
}, {
title: '日期时间',
key: 'createdtime',
type: 'text'
}]
let tableData = []
self.dataSource.map((item) => {
tableData.push({
id: item.id,
name: item.name,
gender: item.gender,
id_photo: window.webServeURL + '/' + item.id_photo,
createdtime: item.createdtime,
})
})
let tableName = '人脸识别数据库'
// console.log(tableData);
table2excel(tableColumn, tableData, tableName)
},
前端导出excel（基于Blob.js和 Export2Excel.js做前端导出）
-
安装：
- npm install -S file-saver
- npm install -S xlsx
- npm install -D script-loader
-
下载导入Blob.js和 Export2Excel.js
-
将blob.js与Export2Excel.js放在同一个文件夹下（vendor）
-
在Export2Excel.js文件中引入blob.js
- require('script-loader!file-saver'); //保存文件用
- require('./Blob.js'); //转二进制用
- require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心
-
使用
-
点击查看代码
exportToExcel() { //导出
const self = this
import('@/vendor/Export2Excel').then(excel => {
const tHeader = [ // Excel表头
'序号',
'类型',
'级别',
'对象索引',
'描述',
'日期时间'
]
const dataVal = [ // 对应的数据数组的字段名
'sequence',
'type',
'level',
'objID',
'desc',
'time'
]
excel.export_json_to_excel2(tHeader, self.tableData, dataVal, '日志列表')
})
},
删除控制台打印（console）
-
安装：
npm install bable-plugin-transform-remove-console-D -
使用：babel.config.js文件中：
点击查看代码
``` const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) const plugins = [] if (IS_PROD) { // plugins.push('transform-remove-console') }// lazy load ant-design-vue
plugins.push(['import', {
'libraryName': 'ant-design-vue',
'libraryDirectory': 'es',
'style': true //style: true会加载 less 文件
}])module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
[
'@babel/preset-env',
{
'useBuiltIns': 'entry',
'corejs': 3
}
]
],
plugins
}</details>
Blockly搭积木式可视化编程
npm install --save blockly
import Blockly from 'blockly';
- 在.vue单文件的script中 引入
点击查看代码
// 引入Blockly
import Blockly from'blockly'
// 引入想要转换的语言，语言有php python dart lua javascript
import 'blockly/javascript'
// 引入语言包并使用
import * as hans from 'blockly/msg/zh-hans'
Blockly.setLocale(hans);
//引入媒体文件：我是在github上下载的blockly源码，将源码中的media文件放入我项目中的public文件夹下
//忽略被vue错认为组件的blockly中的标签，不止以下这些，请发现一个忽略一个
import Vue from'vue'
Vue.config.ignoredElements.push('xml')
Vue.config.ignoredElements.push('block')
Vue.config.ignoredElements.push('field')
Vue.config.ignoredElements.push('category')
Vue.config.ignoredElements.push('sep')
Vue.config.ignoredElements.push('value')
Vue.config.ignoredElements.push('statement')
Vue.config.ignoredElements.push('mutation')
- 在.vue单文件的template中确定引入位置并添加工具栏
点击查看代码
<!-- blockly工作区 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- blockly工具栏 -->
</xml id="toolbox" style="display: none">
<category name="逻辑" colour="%{BKY_LOGIC_HUE}">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
</category>
<sep></sep>
<category name="数学" colour="%{BKY_MATH_HUE}">
<block type="math_number">
<field name="NUM">123</field>
</block>
<block type="math_arithmetic"></block>
<block type="math_single"></block>
</category>
</xml>
<!-- blockly代码区 -->
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
- 在.vue单文件的script中创建blockly工作区
点击查看代码
this.workspace = Blockly.inject('blocklyDiv',
{
//工具栏
toolbox: document.getElementById('toolbox'),
//网格效果
grid:{spacing: 20,length: 3,colour: '#ccc',snap: true},
//媒体资源
media: './media/',
//垃圾桶
trashcan: true
}
);
//工作区监听代码生成器
this.workspace.addChangeListener(this.myUpdateFunction);
methods:{
// 代码生成器
myUpdateFunction(event){
var code = Blockly.JavaScript.workspaceToCode(this.workspace);
document.getElementById('textarea').value = code;
},
// 获取blockly工作区中的code和xml结构
getBlockData(){
const code = Blockly.JavaScript.workspaceToCode(this.workspace);
const xml = Blockly.Xml.workspaceToDom(this.workspace)
const xmlText = Blockly.Xml.domToText(xml);
},
// 回显工作区中的xml结构
setBlockData(xmlText){
this.clearBlockData();
const xml = Blockly.Xml.textToDom(xmlText);
Blockly.Xml.domToWorkspace(xml, this.workspace);
},
// 清空工作区
clearBlockData(){
this.workspace.clear();
},
}