feat：新增图片导出功能

src/utils/crypto.ts

@@ -1,5 +1,5 @@
 import * as CryptoJS from 'crypto-ts'
-
+// 加密
 const AES_KEY = 'mt'
 
 export const cryptoEncode = (data: string): string => {

src/utils/file.ts

@@ -19,25 +19,36 @@ export const readFile = (file: File) => {
 }
 
 /**
- * 下载数据
- * @param { string } content 数据内容
- * @param { ?string } filename 文件名称（默认随机字符）
- * @param { ?string } fileSuffix 文件名称（默认随机字符）
+ * * 通过 a 标签下载数据
+ * @param url 
+ * @param filename 
+ * @param fileSuffix 
  */
-export const downloadFile = (
-  content: string,
-  filename = new Date().getDate().toString(),
-  fileSuffix?: string
-) => {
+export const downloadByA = (url: string, filename = new Date().getDate().toString(), fileSuffix?: string) => {
   const ele = document.createElement('a') // 创建下载链接
   ele.download = `${filename}.${fileSuffix}` //设置下载的名称
   ele.style.display = 'none' // 隐藏的可下载链接
   // 字符内容转变成blob地址
-  const blob = new Blob([content])
-  ele.href = URL.createObjectURL(blob)
+  ele.href = url
   // 绑定点击时间
   document.body.appendChild(ele)
   ele.click()
   // 然后移除
   document.body.removeChild(ele)
 }
+
+/**
+ * 下载数据
+ * @param { string } content 数据内容
+ * @param { ?string } filename 文件名称（默认随机字符）
+ * @param { ?string } fileSuffix 文件名称（默认随机字符）
+ */
+export const downloadTextFile = (
+  content: string,
+  filename = new Date().getDate().toString(),
+  fileSuffix?: string
+) => {
+  // 字符内容转变成blob地址
+  const blob = new Blob([content])
+  downloadByA(URL.createObjectURL(blob), filename, fileSuffix)
+}

src/utils/utils.ts

@@ -3,6 +3,8 @@ import { NIcon } from 'naive-ui'
 import screenfull from 'screenfull'
 import throttle from 'lodash/throttle'
 import Image_404 from '../assets/images/exception/image-404.png'
+import html2canvas from 'html2canvas'
+import { downloadByA } from './file'
 
 /**
  * * 判断是否是开发环境
@@ -146,7 +148,7 @@ export const addEventListener = <K extends keyof WindowEventMap>(
     type,
     throttle(listener, 300, {
       leading: true,
-      trailing: false
+      trailing: false,
     }),
     options
   )
@@ -163,3 +165,21 @@ export const removeEventListener = <K extends keyof WindowEventMap>(
   if (!target) return
   target.removeEventListener(type, listener)
 }
+
+/**
+ * * 截取画面为图片
+ * @param html 需要截取的 DOM
+ */
+export const canvasCut = (html: HTMLElement | null, callback?: Function) => {
+  if (!html) {
+    window['$message'].error('导出失败！')
+    if (callback) callback()
+    return
+  }
+
+  html2canvas(html).then((canvas: HTMLCanvasElement) => {
+    window['$message'].success('导出成功！')
+    downloadByA(canvas.toDataURL(), undefined, 'png')
+    if (callback) callback()
+  })
+}