vue-plugin-hiprint 是使用于 Vue.js 框架的可拖拽打印设计组件。本文对使用该插件的过程做简单总结记录。

本文档提供 vue-plugin-hiprint 的使用指南，如果想探索更多内容，可以参考以下链接：

• Gitee地址：https://gitee.com/CcSimple/vue-plugin-hiprint
• Github地址：https://github.com/CcSimple/vue-plugin-hiprint
• Demo地址：https://ccsimple.gitee.io/vue-plugin-hiprint/
• 公众号文章：https://mp.weixin.qq.com/s/4N4f7CkxodA-fuTJ_FbkOQ
• 文档：https://ccsimple.gitee.io/sv-print-docs/config/start.html 部分内容可能已经迁移至 Github Pages

安装与引用

安装

npm install vue-plugin-hiprint --save

引入

1. 引入样式文件 print-lock.css

   从 node_modules/vue-plugin-hiprint/dist/ 目录下复制一份 print-lock.css 到静态资源目录 public 下。

   在项目 index.html 中添加以下内容：不要遗漏 media="print" ，否则浏览器打印不能正常显示内容。

   <!-- 根据实际情况调整 href -->
   <link rel="stylesheet"  
         type="text/css" 
         media="print"
         href="/print-lock.css">
   
   <!-- 在vue2项目中可直接复制下面这句 -->
   <link rel="stylesheet" 
         type="text/css" 
         media="print" 
         href="<%= BASE_URL %>print-lock.css">
   

   查看是否添加成功：运行项目，在浏览器中打开控制台，查看源代码中是否存在print-lock.css文件，如果存在则表示添加成功。

2. 组件注册

   // vue 2
   
   // 局部导入
   import { hiprint } from "vue-plugin-hiprint";
   
   // 使用
   hiprint.init();
   
   // 全局注册
   import { hiPrintPlugin } from 'vue-plugin-hiprint';
   Vue.use( hiPrintPlugin, '$pluginName');
   
   // 使用
   this.$pluginName.init();
   

常用功能及API

// 导入
import { hiprint } from "vue-plugin-hiprint";

// 初始化
hiprint.init({
    providers: [],
});

// 创建PrintTemplate对象
const hiprintTemplate = new hiprint.PrintTemplate({
    template: {}, // 模板
    settingContainer: "#printElementSetting", // 指定设置项渲染容器
    onImageChooseClick: ()=>{} // 图片选择函数
});

// 调用浏览器打印
hiprintTemplate.print(printData, options, ext);

// 导出为pdf
hiprintTemplate.toPdf(printData, filename);

// 获取pdf blob数据
const blob = await hiprintTemplate.toPdf(printData, filename, { isDownload: false});

样式补丁

1. PDF导出表格合并表头样式异常补丁

/* 导出PDF合并单元格样式问题 */
.hiprint-printElement-table thead {
    background: transparent !important;
}

.hiprint-printElement-tableTarget-border-all {
    border: none !important;
}

.hiprint-printElement-tableTarget-border-top {
    border: none !important;
}

.hiprint-printElement-tableTarget {
    border-top: 1px solid black !important;
    border-left: 1px solid black !important;
    border-bottom: 0 !important;
    border-right: 0 !important;


}

.hiprint-printElement-tableTarget thead,
.hiprint-printElement-tableTarget tbody,
.hiprint-printElement-tableTarget tfoot,
.hiprint-printElement-tableTarget tr,
.hiprint-printElement-tableTarget th {
    border: none !important;
}
.hiprint-printElement-tableTarget td {
    border: none !important;
    border-bottom: 1px solid black !important;
    border-right: 1px solid black !important;
}

/* END*/