最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

焦点热文：开发过程中安装的依赖包

来源：博客园


(资料图)

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-vueplugins.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}

Blockly搭积木式可视化编程

npm install --save blocklyimport Blockly from "blockly";
  • 在.vue单文件的script中 引入
点击查看代码
// 引入Blocklyimport Blockly from"blockly"// 引入想要转换的语言，语言有php python dart lua javascriptimport "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中确定引入位置并添加工具栏
点击查看代码
                                                  123
  • 在.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();    },}

关键词： 点击查看 日期时间 代码生成器