lodop处理样式及打印html节点、url地址、pdf

最新推荐文章于 2024-06-06 16:23:45 发布
蚂蚁子。
最新推荐文章于 2024-06-06 16:23:45 发布
阅读量1.7k
点赞数 1
分类专栏： javascipt lodop 打印文章标签： javascript 前端 es6
本文链接：https://blog.csdn.net/weixin_45288512/article/details/125878961
版权
javascipt 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
lodop
1 篇文章 0 订阅
订阅专栏
打印
1 篇文章 0 订阅
订阅专栏
封装lodop，形成实例化。处理打印样式，读取页面样式及css文件写入打印，或者传入样式及样式文件；打印html节点、url地址页面、pdf
import Vue from "vue";
import { isFunction, _typeof } from "./type";
// import propMessage from "./message";

const Vm = new Vue();
interface Options {
  setting?: Function;
  printInit?: string;
  [proname: string]: any;
}

class LodopPrint {

  private CreatedOKLodopObject: object;
  private CLodopIsLocal: boolean;
  private CLodopJsState: string;
  private is64IE: boolean;
  
  constructor() {
    this.CreatedOKLodopObject = {};
    this.CLodopIsLocal = false;
    this.CLodopJsState = "";
    this.is64IE = false;
    this.init();
  }
  init () {
    if (this.needCLodop()) this.loadCLodop();
  }
  createMessage(type: string) {
    const h = Vm.$createElement;

    const messageBox: {
      [proname: string]: any;
    }  = {
      "Install_32": h('a', { style: 'color: teal', attrs: { href: "/install_lodop32.exe", target: "_blank" } }, '打印控件未安装!点击这里,安装后请刷新页面或重新进入。'),
      "Update_32": h('a', { style: 'color: teal', attrs: { href: "/install_lodop32.exe", target: "_blank" } }, '打印控件需要升级!点击这里,升级后请刷新页面或重新进入。'),
      "Install_64": h('a', { style: 'color: teal', attrs: { href: "/install_lodop64.exe", target: "_blank" } }, '打印控件未安装!点击这里,安装后请刷新页面或重新进入。'),
      "Update_64": h('a', { style: 'color: teal', attrs: { href: "/install_lodop64.exe", target: "_blank" } }, '打印控件需要升级!点击这里,升级后请刷新页面或重新进入。'),
      "FireFox": h('i', { style: 'color: teal' }, '注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它'),
      "Chrome": h('i', { style: 'color: teal' }, '如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装'),
      "CLodopInstall_1": h('a', { style: 'color: teal', attrs: { href: "/CLodop_Setup_for_Win32NT.exe", target: "_blank" } }, 'Web打印服务CLodop未安装启动，点击这里下载执行安装，成功后请刷新或重启浏览器。'),
      "CLodopInstall_2": h('a', { style: 'color: teal', attrs: { href: "/CLodop.protocol:setup", target: "_blank" } }, '若此前已安装过，可点这里直接再次启动，成功后请刷新或重启浏览器。'),
      "CLodopUpdate": h('a', { style: 'color: teal', attrs: { href: "/CLodop_Setup_for_Win32NT.exe", target: "_blank" } }, 'Web打印服务CLodop需升级!点击这里执行升级，成功后请刷新或重启浏览器。'),
    };

    if (!messageBox[type]) return;

    Vm.$notify({
      title: '提示',
      message: messageBox[type],
      type: "error",
      duration: 0
    });
  }
  printing(options: Options = {}) {
    const LODOP = this.getLodop();
    if (!LODOP) return;
    const { type = "html", html, container, setting, printInit = "打印控件功能_Lodop功能_全页", intTop = 0, intLeft = 0, intWidth = "100%", intHeight = "100%", printDesign, print, printA } = options;
    LODOP.PRINT_INIT(printInit);
    if (type === 'pdf') {
      this.printPdf(options);
      return false;
    } else if(type === 'url') {
      this.printUrl(options);
      return false;
    }
    const { styleLink = "", styleCSS = "" } = this.handleOptionsStyle(options);
    let htmlStr: string | Function = '';
    if (type === 'html') {
      if (html) {
        if (isFunction(html)) {
          htmlStr = (html as any)();
          if (typeof html === 'boolean' && !html) {
            return false;
          }
        } else {
          htmlStr = html;
        }
      } else if (container) {
        const dom = document.querySelector(container);
        if (dom) htmlStr = dom.innerHTML;
      }
    } else if (type === 'selector') {
      const dom = document.querySelector(container);
        if (dom) htmlStr = dom.innerHTML;
    }
    const strHtml = `${styleLink}${styleCSS}<body>${htmlStr}</body>`;
    // 添加文本
    LODOP.ADD_PRINT_HTM(intTop, intLeft, intWidth, intHeight, strHtml);
    console.log('高度100%,调整分页粒度，分页不切行');
    LODOP.SET_PRINT_STYLEA(0,"TableRowThickNess",100);

    // 外部可进行更多设置
    if (setting && _typeof(setting) === "function") {
      setting(LODOP, strHtml);
    }
    if (printDesign) {
      // 打印设计
      LODOP.PRINT_DESIGN();
    } else if (print) {
      // 直接打印
      LODOP.PRINT();
    } else if (printA) {
      // 选择打印机
      LODOP.PRINTA();
    } else {
      // 预览
      LODOP.PREVIEW();
    }
  }
  printUrl(options: Options = {}) {
    /**
     * type 打印类型 默认url
     * url 打印文件地址  http://www.w3school.com.cn/index.html
     * print 是否直接打印  默认预览
     * printA 是否选择打印机类型
     */
    const LODOP = this.getLodop();
    const { type = "url", url, print, printA, intTop = 0, intLeft = 0, intWidth = "100%", intHeight = "100%", printInit = "打印控件功能_Lodop功能_全页" } = options;
    if (!LODOP) return false;
    if (!url) return false;
    LODOP.PRINT_INIT(printInit);
    if (type !== 'url') return false;
    LODOP.ADD_PRINT_URL(intTop, intLeft, intWidth, intHeight, url);
    if (print) {
    // 直接打印
      LODOP.PRINT();
    } else if(printA) {
      // 选择打印机
      LODOP.PRINTA();
    } else {
      // 预览
      LODOP.PREVIEW();
    }
    return true;
  }
  printPdf(options: Options = {}) {
    /**
     * type 打印类型 默认pdf
     * url 打印文件  base64 必传
     * print 是否直接打印  默认预览
     * printA 是否选择打印机类型
     */
    const LODOP = this.getLodop();
    const { type = "pdf", url, print, printA, printInit = "打印控件功能_Lodop功能_全页" } = options;
    if (!LODOP) return false;
    if (!url) return false;
    LODOP.PRINT_INIT(printInit);
    if (type === 'pdf') {
      LODOP.ADD_PRINT_PDF(0,0,"100%","100%", url);
    }
    if (print) {
      // 直接打印
      LODOP.PRINT();
    } else if(printA) {
      // 选择打印机
      LODOP.PRINTA();
    } else {
      // 预览
      LODOP.PREVIEW();
    }
    return true;
  }
  handleOptionsStyle(options: Options) {
    const { link, style = "" } = options;
    let styleLink = '';
    if (link) {
      styleLink = `<link href='${link}' type='text/css' rel='stylesheet'>`;
    }
    styleLink = `<head>${this.getStyleLink()}${styleLink}</head>`
    const styleCSS = `<style>${this.getStyleCss()} ${style}</style>`;
    return { styleLink, styleCSS };
  }
  getStyleLink() {
    const data = Array.from(document.getElementsByTagName("link"));
    let str = "";
    data.forEach(link => {
     const rel = link.getAttribute('rel');
     if (rel === 'stylesheet') {
       const href = link.getAttribute('href');
       str +=  `<link href='${href}' type='text/css' rel='stylesheet'>`
      }
    })
    return str;
  }
  getStyleCss() {
    let str = "";
    const data = Array.from(document.getElementsByTagName("style"));
    data.map(item => (str += item.innerHTML));
    return str;
  }
  // ==判断是否需要CLodop(那些不支持插件的浏览器):==
  needCLodop() {
    try {
      const ua = navigator.userAgent;
      if (ua.match(/Windows\sPhone/i)) { return true; }
      if (ua.match(/iPhone|iPod|iPad/i)) { return true; }
      if (ua.match(/Android/i)) { return true; }
      if (ua.match(/Edge\D?\d+/i)) { return true; }

      const verTrident = ua.match(/Trident\D?\d+/i);
      const verIE = ua.match(/MSIE\D?\d+/i);
      let verOPR = ua.match(/OPR\D?\d+/i) || [0];
      let verFF = ua.match(/Firefox\D?\d+/i) || [0];
      const x64 = ua.match(/x64/i);
      if ((!verTrident) && (!verIE) && (x64)) { return true; } else if (verFF) {
        verFF = (verFF[0] as any).match(/\d+/);
        if ((verFF[0] >= 41) || (x64)) { return true; }
      } else if (verOPR) {
        verOPR = (verOPR[0] as any).match(/\d+/);
        if ((verOPR[0] as any) >= 32) { return true; }
      } else if ((!verTrident) && (!verIE)) {
        let verChrome = ua.match(/Chrome\D?\d+/i) || [0];
        if (verChrome) {
          verChrome = (verChrome[0] as any).match(/\d+/);
          if (verChrome[0] >= 41) { return true; }
        }
      }
      return false;
    } catch (err) {
      return true;
    }
  }
  // 加载CLodop时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
  // 主JS文件“CLodopfuncs.js”是固定文件名，其内容是动态的，与当前打印环境有关:
  loadCLodop() {
    if (this.CLodopJsState === "loading" || this.CLodopJsState === "complete") return;
    if ((window as any).getCLodop) return;
    this.CLodopJsState = "loading";
    const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    const JS1 = document.createElement("script");
    const JS2 = document.createElement("script");

    if (window.location.protocol === 'https:') {
      JS1.src = "https://localhost.lodop.net:8443/CLodopfuncs.js";
      JS2.src = "https://localhost.lodop.net:8444/CLodopfuncs.js";
    } else {
      JS1.src = "http://localhost:8000/CLodopfuncs.js";
      JS2.src = "http://localhost:18000/CLodopfuncs.js";
    }
    JS1.onload = JS2.onload = () => { this.CLodopJsState = "complete"; };
    JS1.onerror = JS2.onerror = () => { this.CLodopJsState = "complete"; };
    head.insertBefore(JS1, head.firstChild);
    head.insertBefore(JS2, head.firstChild);
    this.CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
  }
  // ==获取LODOP对象主过程,判断是否安装、需否升级:==
  getLodop(oOBJECT?: any, oEMBED?: any) {
    let LODOP;
    try {
      const ua = navigator.userAgent;
      const isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
      if (this.needCLodop()) {
        try {
          LODOP = (window as any).getCLodop();
        } catch (err) {
          console.log(err);
        }
        if (!LODOP && this.CLodopJsState !== "complete") {
          if (this.CLodopJsState === "loading") {
            Vm.$notify({
              title: '提示',
              message: "打印插件还没初始化完成，请稍等一下再操作",
              type: "error",
              duration: 0
            });
            // this.$message3({
            //   type: 'error',
            //   message: "打印插件还没初始化完成，请稍等一下再操作",
            // });
          } else {
            console.log("没有加载CLodop的主js，请先调用loadCLodop过程.");
          }
          return;
        }
        if (!LODOP) {
          this.createMessage("CLodopInstall_1");
          return;
        } else {
          if (LODOP.CVERSION < "4.1.4.5") {
            this.createMessage("CLodopUpdate");
          }
          if (oEMBED && oEMBED.parentNode) { oEMBED.parentNode.removeChild(oEMBED); } // 清理旧版无效元素
          if (oOBJECT && oOBJECT.parentNode) { oOBJECT.parentNode.removeChild(oOBJECT); }
        }
      } else {
        this.is64IE = isIE && !!(ua.match(/x64/i));
        // ==如果页面有Lodop就直接使用,否则新建:==
        if (oOBJECT || oEMBED) {
          if (isIE) { LODOP = oOBJECT; } else { LODOP = oEMBED; }
        } else if (!this.CreatedOKLodopObject) {
          LODOP = document.createElement("object");
          LODOP.setAttribute("width", '0');
          LODOP.setAttribute("height", '0');
          LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
          if (isIE) { LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA"); } else { LODOP.setAttribute("type", "application/x-print-lodop"); }
          document.documentElement.appendChild(LODOP);
          this.CreatedOKLodopObject = LODOP;
        } else { LODOP = this.CreatedOKLodopObject; }
        // ==Lodop插件未安装时提示下载地址:==
        if ((!LODOP) || (!LODOP.VERSION)) {
          if (ua.indexOf('Chrome') >= 0) {
            this.createMessage("Chrome");
          }
          if (ua.indexOf('Firefox') >= 0) {
            this.createMessage("Firefox");
          }

          this.is64IE ? this.createMessage("Install_64") : this.createMessage("Install_32");
          return LODOP;
        }
      }
      if (LODOP.VERSION < "6.2.2.6") {
        if (!this.needCLodop()) {
          this.is64IE ? this.createMessage("Update_64") : this.createMessage("Update_32");
        }
      }
      // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):==

      // =======================================================
      return LODOP;
    } catch (err) {
      console.log("getLodop出错:" + err);
    }
  }
}

export {
  LodopPrint
};