print-center-vue2 1.1.3

package/README.md

@@ -0,0 +1,161 @@
+## 宝威打印中心
+
+### 快速开始
+
+1. 安装
+   vue3版本 npm install --save print-center
+   vue2版本 npm install --save print-center-vue2
+2. 使用
+
+```js
+// vue3
+import 'print-center/style.css'
+import PrintCenter from 'print-center'
+app.use(PrintCenter)
+```
+
+```js
+// vue2
+import PrintCenter from 'print-center-vue2'
+app.use(PrintCenter)
+```
+
+3. vite.config.js配置（vue3）
+
+最新版本vue不支持运行时编译。需要将bundler配置为别名“vue”为“vue/dist/vue.esm-bundler.js”。
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      vue: 'vue/dist/vue.esm-bundler.js'
+    }
+  },
+  ...
+})
+```
+
+4. 使用案例
+   src\components\Print\index.vue
+
+```vue
+<!-- 浏览器打印--预览界面(组件化) -->
+<template>
+  <PrintCenter ref="previewRef" :previewConfig="previewConfig"></PrintCenter>
+</template>
+<script>
+export default {
+  props: {
+    templateConfig: Object // 模板配置数据
+  },
+  data() {
+    return {
+      // 预览配置数据
+      previewConfig: {
+        exportPdf: false, // 是否使用导出pdf功能(默认false)
+        exportImg: false, // 是否使用导出图片功能(默认false)
+        close: false, // 是否可关闭预览界面
+        // 模板配置数据来源 interface:接口获取 json:json导入
+        dataSources: 'interface',
+        // 模板id (dataSources==interface)时使用
+        templateId: '',
+        // 接口请求路径 (dataSources==interface)时使用
+        interfaceUrl: 'http://localhost:9001/print/details',
+        // 模板配置数据 (dataSources==json)时使用
+        templateConfig: {},
+        // 预览标题
+        title: '',
+        // 页面参数
+        pageParams: {
+          key2: ` [{"rqCode": "我是页面参数"  }]`
+        }
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    // 打印预览
+    preview({ templateConfig, pageParams, templateId }) {
+      this.init({ templateConfig, pageParams, templateId })
+      this.$refs['previewRef'].init()
+    },
+    // 打印
+    print({ templateConfig, pageParams, templateId }) {
+      this.init({ templateConfig, pageParams, templateId })
+      this.$refs['previewRef'].initPrint()
+    },
+    // 初始化
+    init({ templateConfig, pageParams, templateId }) {
+      this.previewConfig.dataSources = templateId ? 'interface' : 'json'
+      if (templateId) {
+        this.previewConfig.templateId = templateId
+      } else {
+        this.previewConfig.templateConfig = templateConfig
+      }
+      this.previewConfig.pageParams = pageParams
+    }
+  }
+}
+</script>
+```
+
+### 预览界面导出图片、pdf功能使用
+
+1. main.js中引入导出插件
+   **vue3+vite**
+
+```js
+// 打印中心导出pdf、图片
+import html2canvas from 'print-center/js/html2canvas/html2canvas.min.js'
+app.config.globalProperties.html2canvas = html2canvas
+import jspdf from 'print-center/js/jspdf/jspdf.umd.min.js'
+app.config.globalProperties.jspdf = jspdf
+```
+
+**vue2+webpack**
+
+```js
+// 打印中心导出pdf、图片
+import html2canvas from 'print-center-vue2/js/html2canvas/html2canvas.min.js'
+Vue.prototype.html2canvas = jspdhtml2canvasf
+import jspdf from 'print-center-vue2/js/jspdf/jspdf.umd.min.js'
+Vue.prototype.jspdf = jspdf
+```
+
+2. 配置数据中使用导出功能
+
+```js
+...
+// 预览配置数据
+ previewConfig: {
+  exportPdf: true, // 是否使用导出pdf功能(默认false)
+  exportImg: true, // 是否使用导出图片功能(默认false)
+  ...
+ }
+...
+```
+
+### v1.0.0（vue3）
+
+1. 初始化打印中心项目，npm部署。
+2. 包含文本、表格、描述列表、栅格四个组件。
+
+### v1.1.0（vue3）
+
+1. 当前版本基础功能已基本完善，后续会继续优化功能，欢迎大家提建议。
+
+### v1.1.2（vue3）
+
+1. 预览界面多模版切换标题显示bug修改。
+2. 文档补全。
+
+### v1.1.3（vue2,vue3）
+
+1. 自定义组件bug修复。
+2. vue2版本兼容处理。