htui-yllkbz 1.2.40 → 1.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.2.40",
+  "version": "1.2.41",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",
   "style": "lib/htui.css",
@@ -24,7 +24,6 @@
     "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",

package/src/packages/index.ts

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

package/src/packages/type.ts

@@ -68,7 +68,7 @@ export interface Column {
   hide?: boolean;
   /**  时间是否跨行展示 */
   spread?: boolean;
-  /** 通过type展示相应的数据  用户id|部门id|时间格式化*/
+  /** 通过type展示相应的数据  用户id|部门id|时间格式化|是否布尔值*/
   type?: 'userId' | 'org' | 'time' | 'common' | 'booolean',
   /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  */
   commonType?: 'userId' | 'departmentId' | 'baseDataId' | 'roleId' | 'baseDataName' | 'baseDataValue',

package/src/views/About.vue

@@ -4,13 +4,11 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-04 09:31:44
+ * @LastEditTime: 2022-01-04 09:47:44
 -->
 <template>
   <div>
-    <HtExportPdf selector="f"
-                 ref="pdf"
-                 :title="'测试'"></HtExportPdf>
+
     <el-button type=""
                @click="test">test</el-button>
     <!-- <ht-count-down :stopwatch="true"
@@ -62,7 +60,6 @@
 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);
@@ -78,7 +75,6 @@ interface State {
   components: {
     HtTable,
     HtCountDown,
-    HtExportPdf,
   },
 })
 export default class Index extends Vue {

package/src/packages/HtExportPdf/index.ts

@@ -1,16 +0,0 @@
-/*
- * @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

@@ -1,46 +0,0 @@
-<!--
- * @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/unit/htmlToPdf.js

@@ -1,108 +0,0 @@
-/*
- * @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
-}