[JavaScript知识库]vue的一些模块功能

vue实现点击打印功能

vue中安装? ?vue-easy-print

npm install vue-easy-print --save

在需要用到的页面引入插件

import ? vueEasyPrint ? from ?"vue-easy-print";

将需要打印的部分，放入一下标签中

<vue-easy-print ref="easyPrint" tableShow></vue-easy-print>

点击触发，自定义点击事件，在事件中执行以下代码

this.$refs.easyPrint.print()

vue实现拼音匹配

vue中安装? ?pinyin-match

npm install pinyin-match --save

在需要用到的页面引入插件

import PinyinMatch from "pinyin-match";

用法

    PinyinMatchYP(query) {
      if (query !== "") {
        let result = [];
        this.options.forEach((i) => {
          let m = PinyinMatch.match(i.drug_name, query);  //(需要过滤的名称，输入的关键词)
          if (m) {
            result.push(i);
          }
        });
        this.options = result;
      } else {
        this.drugarr();
      }
    },

?vue实现elementui 表格导出

vue中安装? ?file-saver

npm install --save xlsx file-saver

在需要用到的页面引入插件

import FileSaver from "file-saver";

import XLSX from "xlsx";

elementui表格未使用fixed

    // 导出
    exportExcel() {
      this.pageSize = this.totalPages; //表格长度变长
      this.currentPage = "1";
      this.handleCurrentChange();
      setTimeout(() => {
        var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
        var wb = XLSX.utils.table_to_book(
          document.querySelector("#exportTab"),
          xlsxParam
        );
        /* get binary string as output */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "库存日志.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") {
            console.log(e, wbout);
          }
        }
        this.pageSize = "10"; //表格还原
        this.handleCurrentChange();
        return wbout;
      }, 1000);
    },

elementui表格使用了fixed

    // 导出
    exportExcel() {
      this.pageSize = this.totalPages; //表格长度变长
      this.currentPage = "1";
      this.isShow = true;
      this.handleCurrentChange();
      setTimeout(() => {
        var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
        let fix = document.querySelector(".el-table__fixed-right");
        let wb;
        if (fix) {
          //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
          wb = XLSX.utils.table_to_book(
            document.querySelector("#exportTab").removeChild(fix),
            xlsxParam
          );
          document.querySelector("#exportTab").appendChild(fix);
        } else {
          wb = XLSX.utils.table_to_book(
            document.querySelector("#exportTab"),
            xlsxParam
          );
        }
        // var wb = XLSX.utils.table_to_book(
        //   document.querySelector("#exportTab"),
        //   xlsxParam
        // );
        /* get binary string as output */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "订单列表.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") {
            console.log(e, wbout);
          }
        }
        this.pageSize = "10"; //表格还原
        this.isShow = false;
        this.handleCurrentChange();
        return wbout;
      }, 1000);
    },