feat(print): add print example

Vben
1 parent bb67692c
Showing 11 changed files with 139 additions and 98 deletions
CHANGELOG.zh_CN.md
package.json
src/locales/lang/en/routes/demo/feat.ts
src/locales/lang/zh_CN/routes/demo/feat.ts
src/router/menus/modules/demo/charts.ts
src/router/menus/modules/demo/comp.ts
src/router/menus/modules/demo/feat.ts
src/router/menus/modules/demo/system.ts
src/router/routes/modules/demo/feat.ts
src/views/demo/feat/print/index.vue
yarn.lock
@@ -3,6 +3,7 @@
 ### ✨ Features
 - 新增`headerTitle` slot
+- 新增打印示例
 ### ✨ Refactor
@@ -43,10 +43,11 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
+    "print-js": "^1.6.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
     "vditor": "^3.8.4",
-    "vue": "^3.0.8",
+    "vue": "^3.0.9",
     "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.5",
     "vue-types": "^3.0.2",
@@ -74,7 +75,7 @@
     "@vitejs/plugin-legacy": "^1.3.2",
     "@vitejs/plugin-vue": "^1.2.0",
     "@vitejs/plugin-vue-jsx": "^1.1.2",
-    "@vue/compiler-sfc": "^3.0.8",
+    "@vue/compiler-sfc": "^3.0.9",
     "autoprefixer": "^10.2.5",
     "body-parser": "^1.19.0",
     "commitizen": "^4.2.3",
@@ -2,6 +2,7 @@ export default {
   feat: 'Page Function',
   icon: 'Icon',
   tabs: 'Tabs',
+  print: 'Print',
   contextMenu: 'Context Menu',
   download: 'Download',
   clickOutSide: 'ClickOutSide',
@@ -2,6 +2,7 @@ export default {
   feat: '功能',
   icon: '图标',
   tabs: '标签页操作',
+  print: '打印',
   contextMenu: '右键菜单',
   download: '文件下载',
   clickOutSide: 'ClickOutSide组件',
@@ -6,31 +6,20 @@ const menu: MenuModule = {
   menu: {
     name: t('routes.demo.charts.charts'),
     path: '/charts',
-    tag: {
-      content: 'new',
-    },
+
     children: [
       {
         path: 'aMap',
         name: t('routes.demo.charts.aMap'),
-        tag: {
-          dot: true,
-        },
       },
       {
         path: 'baiduMap',
         name: t('routes.demo.charts.baiduMap'),
-        tag: {
-          dot: true,
-        },
       },
       {
         path: 'googleMap',
         name: t('routes.demo.charts.googleMap'),
-        tag: {
-          dot: true,
-        },
       },
       {
         path: 'apexChart',
@@ -6,9 +6,7 @@ const menu: MenuModule = {
   menu: {
     name: t('routes.demo.comp.comp'),
     path: '/comp',
-    tag: {
-      dot: true,
-    },
+
     children: [
       {
         path: 'basic',
@@ -123,9 +121,6 @@ const menu: MenuModule = {
       {
         path: 'timestamp',
         name: t('routes.demo.comp.time'),
-        tag: {
-          content: 'new',
-        },
       },
       {
         path: 'transition',
@@ -163,10 +158,7 @@ const menu: MenuModule = {
       {
         path: 'tree',
         name: t('routes.demo.comp.tree'),
-        tag: {
-          dot: true,
-          type: 'warn',
-        },
+
         children: [
           {
             path: 'basic',
@@ -175,10 +167,6 @@ const menu: MenuModule = {
           {
             path: 'editTree',
             name: t('routes.demo.comp.editTree'),
-            tag: {
-              dot: true,
-              type: 'warn',
-            },
           },
           {
             path: 'actionTree',
@@ -14,16 +14,10 @@ const menu: MenuModule = {
       {
         path: 'icon',
         name: t('routes.demo.feat.icon'),
-        tag: {
-          content: 'new',
-        },
       },
       {
         path: 'ws',
         name: t('routes.demo.feat.ws'),
-        tag: {
-          content: 'new',
-        },
       },
       {
         path: 'tabs',
@@ -39,6 +33,13 @@ const menu: MenuModule = {
         name: t('routes.demo.feat.download'),
       },
       {
+        path: 'print',
+        name: t('routes.demo.feat.print'),
+        tag: {
+          content: 'new',
+        },
+      },
+      {
         path: 'click-out-side',
         name: t('routes.demo.feat.clickOutSide'),
       },
@@ -98,14 +99,14 @@ const menu: MenuModule = {
         path: 'breadcrumb',
         children: [
-          {
-            path: 'flat',
-            name: t('routes.demo.feat.breadcrumbFlat'),
-          },
-          {
-            path: 'flatDetail',
-            name: t('routes.demo.feat.breadcrumbFlatDetail'),
-          },
+          // {
+          //   path: 'flat',
+          //   name: t('routes.demo.feat.breadcrumbFlat'),
+          // },
+          // {
+          //   path: 'flatDetail',
+          //   name: t('routes.demo.feat.breadcrumbFlatDetail'),
+          // },
           {
             path: 'children',
             name: t('routes.demo.feat.breadcrumbChildrenDetail'),
@@ -6,9 +6,6 @@ const menu: MenuModule = {
   menu: {
     name: t('routes.demo.system.moduleName'),
     path: '/system',
-    tag: {
-      content: 'new',
-    },
     children: [
       {
         path: 'account',
@@ -30,6 +30,14 @@ const feat: AppRouteModule = {
       },
     },
     {
+      path: 'print',
+      name: 'Print',
+      component: () => import('/@/views/demo/feat/print/index.vue'),
+      meta: {
+        title: t('routes.demo.feat.print'),
+      },
+    },
+    {
       path: 'tabs',
       name: 'TabsDemo',
       component: () => import('/@/views/demo/feat/tabs/index.vue'),
+<template>
+  <PageWrapper title="打印示例">
+    <CollapseContainer title="json打印表格">
+      <a-button type="primary" @click="jsonPrint">打印</a-button>
+    </CollapseContainer>
+
+    <a-button type="primary" class="mt-5" @click="imagePrint">Image Print</a-button>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  import printJS from 'print-js';
+
+  export default defineComponent({
+    name: 'AppLogo',
+    components: { PageWrapper, CollapseContainer },
+    setup() {
+      function jsonPrint() {
+        printJS({
+          printable: [
+            { name: 'll', email: '123@gmail.com', phone: '123' },
+            { name: 'qq', email: '456@gmail.com', phone: '456' },
+          ],
+          properties: ['name', 'email', 'phone'],
+          type: 'json',
+        });
+      }
+
+      function imagePrint() {
+        printJS({
+          printable: [
+            'https://anncwb.github.io/anncwb/images/preview1.png',
+            'https://anncwb.github.io/anncwb/images/preview2.png',
+          ],
+          type: 'image',
+          header: 'Multiple Images',
+          imageStyle: 'width:100%;',
+        });
+      }
+      return {
+        jsonPrint,
+        imagePrint,
+      };
+    },
+  });
+</script>
@@ -1995,14 +1995,14 @@
     estree-walker "^2.0.1"
     source-map "^0.6.1"
-"@vue/compiler-core@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.8.tgz#8e24a63877232f7c5d00e97201609da7de1a3191"
-  integrity sha512-TFusP6wemgJPgmXyxHiYshtYci1PdAjX0bOSJqxPDXf2ykojRGq9RcTKj85b1fWyC9fnT5HK73OHe6rqZUa8vA==
+"@vue/compiler-core@3.0.9":
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.9.tgz#ec7efa676889aee006fc43739ee4a67a952ac623"
+  integrity sha512-bHAPwfVoLhGx8d6KV/OfGf/3gwpymVirgfmSyhgv5YuXDybLa6BwjSLvhNMAyDP+4q4pp0p6g248LuoOy5W6OA==
   dependencies:
     "@babel/parser" "^7.12.0"
     "@babel/types" "^7.12.0"
-    "@vue/shared" "3.0.8"
+    "@vue/shared" "3.0.9"
     estree-walker "^2.0.1"
     source-map "^0.6.1"
@@ -2014,25 +2014,25 @@
     "@vue/compiler-core" "3.0.7"
     "@vue/shared" "3.0.7"
-"@vue/compiler-dom@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.8.tgz#97b1a56998472247b8944b6ef71dacbdd708eb6c"
-  integrity sha512-uMUtpFqWOXlbnV167ihPJehVa/84k5xfTrYHJh2bqKaSL7sA2b1bkhFjTXAfOss9LcrGnQSk/CjOPZGZfExEVw==
+"@vue/compiler-dom@3.0.9":
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.9.tgz#1fd554097d9ab36eca73bc6d0d9607fecf94e71c"
+  integrity sha512-tkq6umPSELaghvOExWfGNwrCRc7FTul3RLykKzBZWhb87sSESq0XxiKELfBOfEbzdhWg6BJ1WXKDeq+al/viEQ==
   dependencies:
-    "@vue/compiler-core" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/compiler-core" "3.0.9"
+    "@vue/shared" "3.0.9"
-"@vue/compiler-sfc@^3.0.8":
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.8.tgz#f3515814708895406c5215329c57f30571e39f01"
-  integrity sha512-KDSvOVopKwwxdVlktkUlCYv2KUvJz/2sgkflb1LmqSSNMwQ1Yso934fNstd4Su0u25JIYl1piqISBIcBnxtFBA==
+"@vue/compiler-sfc@^3.0.9":
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.9.tgz#0f993a6e159ca6ad351d8ee0c4734771d2590115"
+  integrity sha512-meneFRb9xIDgv/gYWCr9xKryvPi0tVffQzLjCkyN4RF1EndqLS71xugUX9wQsS4F1SAP+zlZbcgMFmTSC4OpHw==
   dependencies:
     "@babel/parser" "^7.13.9"
     "@babel/types" "^7.13.0"
-    "@vue/compiler-core" "3.0.8"
-    "@vue/compiler-dom" "3.0.8"
-    "@vue/compiler-ssr" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/compiler-core" "3.0.9"
+    "@vue/compiler-dom" "3.0.9"
+    "@vue/compiler-ssr" "3.0.9"
+    "@vue/shared" "3.0.9"
     consolidate "^0.16.0"
     estree-walker "^2.0.1"
     hash-sum "^2.0.0"
@@ -2044,13 +2044,13 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
-"@vue/compiler-ssr@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.8.tgz#2be3221c82873c47a9d71311efe19f8de0f459aa"
-  integrity sha512-9xQO9IOK3B+7jCPIkqe8MmoRd17UxDvyjnsGXQfMkGrK+eONPB5/Ic6b1P2oZTXuTI2IAdnXnwDWXBSB6Cphag==
+"@vue/compiler-ssr@3.0.9":
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.9.tgz#aebce25e573b9db34964b682bb1631a7240ba43d"
+  integrity sha512-99h5k6Up+s8AzTNH1ljtXE/QlnG8yaGLePwQ4XQaWfk23ESUnmGZWEC+y+ZXznf8pIfJ0uPeD9EVgQzQAyZ2aA==
   dependencies:
-    "@vue/compiler-dom" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/compiler-dom" "3.0.9"
+    "@vue/shared" "3.0.9"
 "@vue/devtools-api@^6.0.0-beta.5":
   version "6.0.0-beta.7"
@@ -2064,12 +2064,12 @@
   dependencies:
     "@vue/shared" "3.0.7"
-"@vue/reactivity@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.8.tgz#c09afb698af2fc30fe47d2a9a918e7262e59288a"
-  integrity sha512-W0oEQ005rUa6r1Rq/fEw/Nx3FN+AoAYV2Kf+qI8RGOXHYuUdgVEf//o0UUmlT7ocnniOEf46l+eLfgvilWYJoA==
+"@vue/reactivity@3.0.9":
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.9.tgz#875f241b8c10262560b190ccdeff2d0ab7053e11"
+  integrity sha512-W1AbGhzphVjY+TL32lQDwLDNvLzZKOcUgaIaLOoALWMtjzN4ExOUJzrR1FC3ynlpMHIEfcUo8GPgfnNmvMGdgQ==
   dependencies:
-    "@vue/shared" "3.0.8"
+    "@vue/shared" "3.0.9"
 "@vue/runtime-core@3.0.7":
   version "3.0.7"
@@ -2079,13 +2079,13 @@
     "@vue/reactivity" "3.0.7"
     "@vue/shared" "3.0.7"
-"@vue/runtime-core@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.8.tgz#d17860ab416fd483ffe768a53b1065d9d5180789"
-  integrity sha512-H7d+s56RPFMWT7SOwabRo9Rx6auQ4AsoY7dZ0lmT2fmgwQ+knEnqmL1KWSPQIruleYU5yCtbgyqByVz8ej5e1A==
+"@vue/runtime-core@3.0.9":
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.9.tgz#9665f149468355a524a304cb8f260147a4d294e6"
+  integrity sha512-j94xZ/wRZTVhqpoUgmxBTlojnPFu6TTXNw1Vw8oQkW1ZTGD0IwiJe3ycsKd1bpleXEMVt55GzGlCopI33/Gdmg==
   dependencies:
-    "@vue/reactivity" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/reactivity" "3.0.9"
+    "@vue/shared" "3.0.9"
 "@vue/runtime-dom@3.0.7":
   version "3.0.7"
@@ -2096,13 +2096,13 @@
     "@vue/shared" "3.0.7"
     csstype "^2.6.8"
-"@vue/runtime-dom@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.8.tgz#6d39d1304a1b14f9a1422b394e8d3a5a7af7f0ad"
-  integrity sha512-ijW6ycxydtE92rx4nRZDLONhNxtPqX09fQXEukHYv2bNnvO1Q4qY/KZ0E6wqOG0d4ZEmIabjAzG9IbNzalkFnQ==
+"@vue/runtime-dom@3.0.9":
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.9.tgz#16a1d001dc746a9f346ee7fb9de90d52ad097b61"
+  integrity sha512-6NCjpwa5hNBFDdokquAgMl2tNEYyQD6kBy9Mh6M2776bxYLXZCqL4/e0UrpBuBiHTrkAlUGODD7PyYGaqH6fyA==
   dependencies:
-    "@vue/runtime-core" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/runtime-core" "3.0.9"
+    "@vue/shared" "3.0.9"
     csstype "^2.6.8"
 "@vue/shared@3.0.7":
@@ -2110,10 +2110,10 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz#96d52988efc07444c108c7c6803ba7cc93e40045"
   integrity sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg==
-"@vue/shared@3.0.8":
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.8.tgz#b18d3a912299c0360c41bb42f03f502c5016bb1e"
-  integrity sha512-zDdHjJjzgWYFw8TTUW08JjdERTlBik5/N5LuTAqU0e4wS6wElcvftiNHrD0ONr79O3fi66Z3Ug4jgPhBomPQUA==
+"@vue/shared@3.0.9":
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.9.tgz#09882d745ded52b07e4481d036659d733edd2a9a"
+  integrity sha512-lv20q1O5dybwro+V+vnxHCmSIxi9mvTORSgAbGrANGYK8zF4K1S9TOankIvdkcvfZ88IR95O2pTI2Pb3c3BaNg==
 "@vueuse/core@^4.6.2":
   version "4.6.2"
@@ -8708,6 +8708,11 @@ pretty-quick@^3.1.0:
     mri "^1.1.5"
     multimatch "^4.0.0"
+print-js@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz#692b046cf31992b46afa6c6d8a9db1c69d431d1f"
+  integrity sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==
+
 printj@~1.1.0, printj@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
@@ -11115,14 +11120,14 @@ vue@^3.0.0:
     "@vue/runtime-dom" "3.0.7"
     "@vue/shared" "3.0.7"
-vue@^3.0.8:
-  version "3.0.8"
-  resolved "https://registry.npmjs.org/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
-  integrity sha512-EE6mfGnPkQgTl1A9Vl2Jld9i4cN7KUDYTC0xPSfNRff6mwYDAqjtesdFo+Sk4/BkRfFSPgR1VnzNB7YbMLdrjw==
+vue@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.npmjs.org/vue/-/vue-3.0.9.tgz#c68ffc0e4aa2b0f1905124a9037b6e352de469ad"
+  integrity sha512-MOvqDpvDslMWJo5kyGW1nTsTIPAuSzgVqmlzSQInIEqkHOu16pNbXuTjnG7jc/yIvQYFSQZqv6Pvad0iO5QkyQ==
   dependencies:
-    "@vue/compiler-dom" "3.0.8"
-    "@vue/runtime-dom" "3.0.8"
-    "@vue/shared" "3.0.8"
+    "@vue/compiler-dom" "3.0.9"
+    "@vue/runtime-dom" "3.0.9"
+    "@vue/shared" "3.0.9"
 vuex-module-decorators@^1.0.1:
   version "1.0.1"