htui-yllkbz 1.2.38 → 1.2.39

package/package.json

@@ -1,54 +1,56 @@
-{
-  "name": "htui-yllkbz",
-  "version": "1.2.38",
-  "typings": "types/index.d.ts",
-  "main": "lib/htui.common.js",
-  "style": "lib/htui.css",
-  "private": false,
-  "files": [
-    "lib/**",
-    "types",
-    "src"
-  ],
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "lib": "vue-cli-service build --target lib --name htui --dest lib src/packages/index.ts",
-    "publish": "npm run lib && npm publish",
-    "build-exports": "vue-cli-service build --dest dist/components --target wc-async --name xhsj src/exports/* --inline-vue"
-  },
-  "dependencies": {
-    "axios": "^0.21.0",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.14.1",
-    "htui-yllkbz": "^1.2.35",
-    "mavon-editor": "^2.10.4",
-    "moment": "^2.29.1",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.3",
-    "vue-kst-auth": "^2.1.15",
-    "vue-property-decorator": "^8.4.2",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "^4.5.0",
-    "@vue/cli-plugin-typescript": "^4.5.0",
-    "@vue/cli-service": "^4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "compression-webpack-plugin": "^3.0.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "typescript": "~3.9.3",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
+{
+  "name": "htui-yllkbz",
+  "version": "1.2.39",
+  "typings": "types/index.d.ts",
+  "main": "lib/htui.common.js",
+  "style": "lib/htui.css",
+  "private": false,
+  "files": [
+    "lib/**",
+    "types",
+    "src"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name htui --dest lib src/packages/index.ts",
+    "publish": "npm run lib && npm publish",
+    "build-exports": "vue-cli-service build --dest dist/components --target wc-async --name xhsj src/exports/* --inline-vue"
+  },
+  "dependencies": {
+    "axios": "^0.21.0",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.14.1",
+    "html2canvas": "1.0.0-rc.1",
+    "htui-yllkbz": "^1.2.35",
+    "jspdf": "^1.5.3",
+    "mavon-editor": "^2.10.4",
+    "moment": "^2.29.1",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-kst-auth": "^2.1.15",
+    "vue-property-decorator": "^8.4.2",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-plugin-babel": "^4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.0",
+    "@vue/cli-plugin-typescript": "^4.5.0",
+    "@vue/cli-service": "^4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "compression-webpack-plugin": "^3.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^1.19.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "typescript": "~3.9.3",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

package/src/packages/HtCountDown/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-12-21 16:24:07
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-26 11:41:28
+ * @LastEditTime: 2021-12-29 10:11:23
 -->
 <template>
   <div>
@@ -32,6 +32,10 @@ export default class HtCountDown extends Vue {
   @Prop() times!: number;
   /**  是否启动 */
   @Prop() start?: boolean;
+  /**  是否是秒表 */
+  @Prop() stopwatch?: boolean;
+  /**  刷新频率 --默认1000毫秒 */
+  @Prop() frequency?: number;
 
   /** 数据 */
   state: State = {
@@ -39,16 +43,49 @@ export default class HtCountDown extends Vue {
     count: 0,
   };
   timer: any = undefined;
+
   created() {
     /**  如果是传入的秒数 */
+
+    if (!this.stopwatch) {
+      if (this.times) {
+        this.state.count = this.times;
+      }
+      /**  如果传入的是哪一天 */
+      if (this.date) {
+        const sec =
+          (new Date(this.date).getTime() - new Date().getTime()) / 1000;
+        this.state.count = sec > 0 ? sec : 0;
+      }
+    } else {
+      //如果是秒表则启动秒表计时:
+      this.startStopWatch(true);
+    }
+  }
+  /**  秒表 */
+  startStopWatch(reset: boolean) {
+    if (reset) {
+      this.state.count = 0;
+    }
+
+    this.timer = setInterval(() => {
+      this.state.count = parseFloat(
+        (this.state.count + this.getFrequency / 1000).toFixed(5)
+      );
+    }, this.getFrequency);
+  }
+  /**  重置 */
+  reset() {
     if (this.times) {
+      clearInterval(this.timer);
       this.state.count = this.times;
+      this.getTimer();
     }
-    /**  如果传入的是哪一天 */
-    if (this.date) {
-      const sec = (new Date(this.date).getTime() - new Date().getTime()) / 1000;
-      this.state.count = sec > 0 ? sec : 0;
+    if (this.stopwatch) {
+      clearInterval(this.timer);
+      this.startStopWatch(true);
     }
+    //
   }
   /**  时间倒计时开始 */
   getTimer() {
@@ -57,10 +94,14 @@ export default class HtCountDown extends Vue {
       if (this.state.count === 0) {
         clearInterval(this.timer);
       }
-    }, 1000);
+    }, this.getFrequency);
   }
   dateLess() {
     const total: number = this.state.count;
+
+    if (this.stopwatch) {
+      return total;
+    }
     if (!total) {
       return "--";
     }
@@ -110,15 +151,21 @@ export default class HtCountDown extends Vue {
           (new Date(this.date).getTime() - new Date().getTime()) / 1000;
         this.state.count = sec > 0 ? sec : 0;
       }
-      if (!this.date && !this.times) {
+      if (this.stopwatch) {
+        this.startStopWatch(false);
+      } else if (!this.date && !this.times) {
         this.$notify.error("请先传入完成的参数");
         return;
+      } else {
+        this.getTimer();
       }
-      this.getTimer();
     } else {
       clearInterval(this.timer);
     }
   }
+  get getFrequency() {
+    return this.frequency || 1000;
+  }
 }
 </script>
 <style lang='scss' scoped></style>

package/src/packages/HtExportPdf/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @Descripttion:导出PDF
+ * @version:
+ * @Author: hutao
+ * @Date: 2021-11-15 15:00:57
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-29 09:53:53
+ */
+import HtExportPdf from "./index.vue";
+
+(HtExportPdf as any).install = function (Vue: any) {
+
+  Vue.component("HtExportPdf", HtExportPdf);
+};
+
+export default HtExportPdf;

package/src/packages/HtExportPdf/index.vue

@@ -0,0 +1,46 @@
+<!--
+ * @Descripttion: 导出PDF
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-09-02 09:03:43
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-29 14:25:39
+-->
+<template>
+  <div @click="exportPdf">
+    <slot>
+      <el-button type="primary">
+        导出PDF
+      </el-button>
+    </slot>
+    <div ref="demo">dsdsdsdsdsds</div>
+  </div>
+</template>
+<script lang='ts'>
+import { Component, Prop, Vue } from "vue-property-decorator";
+import htmlToPdf from "@/unit/htmlToPdf.js";
+/** 设置axios返回类型 */
+Vue.config.productionTip = false;
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+}
+@Component
+export default class HtExportPdf extends Vue {
+  /**  导出文件对应的id */
+  @Prop() selector!: string;
+  /** 文件导出名  */
+  @Prop() title!: string;
+  exportPdf(t: any) {
+    console.log("this.selector", this.selector, t);
+    if (!this.selector) {
+      this.$notify.error("请用selector传入需要导出的内容id");
+      return;
+    }
+    console.log('document.querySelector("#ht-pdf")', this.$refs.demo);
+    htmlToPdf.downloadPDF(t, this.title);
+  }
+}
+</script>
+
+<style lang='scss' scoped></style>

package/src/packages/HtTable/index.vue

@@ -5,7 +5,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-23 14:58:42
+ * @LastEditTime: 2022-01-04 09:30:09
 -->
 <template>
   <div v-loading="state.loading">
@@ -120,6 +120,13 @@
                   </div>
                   <span v-else>--</span>
                 </template>
+                <!-- 处理部门人员 -->
+                <template v-else-if="item.type==='boolean'">
+                  <el-tag :type="'success'"
+                          v-if="getPropByPath(row,item.key)">是</el-tag>
+                  <el-tag type="danger"
+                          v-else>否</el-tag>
+                </template>
                 <!-- 其他 -->
                 <span v-else>{{getPropByPath(row,item.key)}}</span>
               </slot>
@@ -157,7 +164,6 @@
 </template>
 <script lang='ts'>
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { _axios } from "vue-kst-auth";
 import { Column, PageInfoType } from "@/packages/type";
 import PageInfo from "@/packages/PageInfo/index.vue";
 interface State {

package/src/packages/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-26 11:20:23
+ * @LastEditTime: 2021-12-29 09:55:45
  */
 
 // 导入组件
@@ -18,9 +18,10 @@ import HtExport from './HtExport/index'
 import HtUpload from './HtUpload/index'
 import HtMd from './HtMd/index'
 import HtCountDown from './HtCountDown/index'
+import HtExportPdf from './HtExportPdf/index'
 
 // 存储组件列表
-const components = [HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown]
+const components = [HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtExportPdf]
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue: any) {
   // 判断是否安装
@@ -36,6 +37,6 @@ export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
   // 以下是具体的组件列表
-  HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown
+  HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtExportPdf
 }
 

package/src/shims-vue.d.ts

@@ -4,10 +4,15 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-21 14:28:09
+ * @LastEditTime: 2021-12-29 10:23:59
  */
 declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
 }
+declare module "*.js" {
+  const body: any
+
+  export default body;
+}
 declare module "*.png"

package/src/unit/htmlToPdf.js

@@ -0,0 +1,108 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-12-29 09:52:58
+ * @LastEditors: hutao
+ * @LastEditTime: 2021-12-29 14:15:53
+ */
+//不使用JQuery版的
+
+import html2canvas from 'html2canvas';
+import JsPDF from 'jspdf';
+/**
+ * @param  ele          要生成 pdf 的DOM元素（容器）
+ * @param  padfName     PDF文件生成后的文件名字
+ * */
+
+function downloadPDF(ele, pdfName){
+
+    const eleW = ele.offsetWidth;// 获得该容器的宽
+    const eleH = ele.offsetHeight;// 获得该容器的高
+
+
+    const eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
+    const eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
+
+    const canvas = document.createElement("canvas");
+    let abs = 0;
+
+    const winIn = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
+    const winOut = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
+
+    if(winOut>winIn){
+        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
+        abs = (winOut - winIn)/2;    // 获得滚动条宽度的一半
+        // console.log(a, '新abs');
+    }
+
+    canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
+    canvas.height = eleH * 2;
+
+
+
+
+    const context = canvas.getContext("2d");
+
+    context.scale(2, 2);
+
+    context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
+    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
+    // translate的时候，要把这个差值去掉
+
+    // html2canvas(element).then( (canvas)=>{ //报错
+    // html2canvas(element[0]).then( (canvas)=>{
+  console.log('baocuo',);
+    html2canvas( ele, {
+        dpi: 300,
+        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
+        useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
+    }).then((canvas) => {
+      console.log('baocuo-------1',);
+      setTimeout(() => {
+        const contentWidth = canvas.width;
+        const contentHeight = canvas.height;
+          //一页pdf显示html页面生成的canvas高度;
+          const pageHeight = contentWidth / 592.28 * 841.89;
+          //未生成pdf的html页面高度
+          let leftHeight = contentHeight;
+          //页面偏移
+          let position = 0;
+          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+          const imgWidth = 595.28;
+          const imgHeight = 595.28/contentWidth * contentHeight;
+  
+          const pageData = canvas.toDataURL('image/jpeg', 1.0);
+          const pdf = new JsPDF('', 'pt', 'a4');
+  
+          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+          //当内容未超过pdf一页显示的范围，无需分页
+          if (leftHeight < pageHeight) {
+              //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
+              pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+              // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
+          } else {    // 分页
+              while(leftHeight > 0) {
+                  pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
+                  leftHeight -= pageHeight;
+                  position -= 841.89;
+                  //避免添加空白页
+                  if(leftHeight > 0) {
+                      pdf.addPage();
+                  }
+              }
+          }
+  
+          //可动态生成
+          pdf.save(pdfName);
+     },1000)
+
+    })
+
+
+}
+
+
+export default {
+    downloadPDF
+}

package/src/views/About.vue

@@ -4,33 +4,44 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-26 11:39:37
+ * @LastEditTime: 2022-01-04 09:31:44
 -->
 <template>
   <div>
-    <el-tag type="">
-      <ht-count-down :times="250"
+    <HtExportPdf selector="f"
+                 ref="pdf"
+                 :title="'测试'"></HtExportPdf>
+    <el-button type=""
+               @click="test">test</el-button>
+    <!-- <ht-count-down :stopwatch="true"
+                     :frequency="200"
                      :start="!state.start">
         <template slot-scope="{timeStr}">
           {{timeStr}}
         </template>
       </ht-count-down>
-    </el-tag>
+      <ht-count-down :stopwatch="true"
+                     :start="!state.start">
+        <template slot-scope="{timeStr}">
+          {{timeStr}}
+        </template>
+      </ht-count-down> -->
 
     <ht-md v-model="state.content"
            :subfield="true"></ht-md>
-    <HtTable :data="state.data"
-             @onchange="test"
-             :height="200"
-             :columns="state.columns">
-      <div slot="sex"
-           slot-scope="{row}">{{row.sex?'男':'女'}}</div>
-      <div slot="age"
-           slot-scope="{row}">
-        <el-tag>{{row.age}}</el-tag>
-      </div>
-      <div slot="header_name">测试名字</div>
-    </HtTable>
+    <div ref="ht-pdf">
+      <HtTable :data="state.data"
+               :height="200"
+               :columns="state.columns">
+        <div slot="sex"
+             slot-scope="{row}">{{row.sex?'男':'女'}}</div>
+        <div slot="age"
+             slot-scope="{row}">
+          <el-tag>{{row.age}}</el-tag>
+        </div>
+        <div slot="header_name">测试名字</div>
+      </HtTable>
+    </div>
     <!-- <el-dropdown>
       <el-select placeholder="请选择">
       </el-select>
@@ -51,6 +62,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import HtTable from "@/packages/HtTable/index.vue";
 import HtCountDown from "@/packages/HtCountDown/index.vue";
+import HtExportPdf from "@/packages/HtExportPdf/index.vue";
 import HtUi from "htui-yllkbz";
 import "htui-yllkbz/lib/htui.css";
 Vue.use(HtUi);
@@ -66,6 +78,7 @@ interface State {
   components: {
     HtTable,
     HtCountDown,
+    HtExportPdf,
   },
 })
 export default class Index extends Vue {
@@ -143,10 +156,24 @@ export default class Index extends Vue {
     ],
   };
   /** 生命周期 */
+  created() {
+    //this.rewriteGetComputedStyle();
+  }
   /** 方法 */
   test() {
+    (this.$refs.pdf as any).exportPdf(this.$refs["ht-pdf"]);
     //console.log("ee", e);
   }
+  // rewriteGetComputedStyle() {
+  //   const getComputedStyle = window.getComputedStyle;
+  //   window.getComputedStyle = function (element: any, property) {
+  //     console.log("element", element, typeof element);
+  //     if (element != "localhost:8080") {
+  //       return getComputedStyle(element.host || element, property);
+  //     }
+  //     return "";
+  //   };
+  // }
   save(e: string, f: string) {
     console.log("e,f", e, f);
   }