|
|
@@ -0,0 +1,143 @@
|
|
|
+import html2canvas from "html2canvas";
|
|
|
+import JSPDF from "jspdf";
|
|
|
+import { getActivePinia } from "pinia";
|
|
|
+
|
|
|
+/**
|
|
|
+ * loading
|
|
|
+ * @param type 是否显示
|
|
|
+ */
|
|
|
+const resetLoaing = (type: boolean) => {
|
|
|
+ const store = getActivePinia()
|
|
|
+ if (!store) return
|
|
|
+ const obj = store.state.value
|
|
|
+ for (const key in obj) {
|
|
|
+ const el = obj[key]
|
|
|
+ if ('loading' in el) {
|
|
|
+ el.loading = type
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 导出PDF
|
|
|
+ * @param domID 需要输出PDF的页面id
|
|
|
+ * @param fileName 文件名
|
|
|
+ * @param type 默认A4分页
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+export const exp2pdf = async (domID: string, fileName: string, type = 'A4') => {
|
|
|
+ const dom = document.getElementById(domID)
|
|
|
+ if (!dom) return
|
|
|
+ resetLoaing(true)
|
|
|
+ const canvas = await html2canvas(dom, {
|
|
|
+ logging: false,
|
|
|
+ useCORS: true, // 允许图片跨域
|
|
|
+ scale: 1.5
|
|
|
+ })
|
|
|
+
|
|
|
+ if (type === 'A4') {
|
|
|
+ // A4分页
|
|
|
+ const pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
|
|
|
+ const ctx = canvas.getContext("2d") as any
|
|
|
+ const a4w = 200;
|
|
|
+ const a4h = 277 // A4大小，210mm x 297mm，四边各保留20mm的边距
|
|
|
+ const imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
|
|
|
+ let renderedHeight = 0
|
|
|
+ while (renderedHeight < canvas.height) {
|
|
|
+ const page = document.createElement("canvas")
|
|
|
+ page.width = canvas.width
|
|
|
+ page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
|
|
|
+ // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
|
|
|
+ page.getContext("2d", { willReadFrequently: true })?.putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
|
|
|
+ pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距
|
|
|
+ renderedHeight += imgHeight
|
|
|
+ if (renderedHeight < canvas.height) { pdf.addPage() } // 如果后面还有内容，添加一个空页
|
|
|
+ // delete page;
|
|
|
+ }
|
|
|
+ pdf.save(fileName)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ // 整张
|
|
|
+ const domHeight = dom.offsetHeight // 获取DOM高度
|
|
|
+ const domWidth = dom.offsetWidth // 获取DOM宽度
|
|
|
+ const pdf = new JSPDF('p', 'px', [domWidth, domHeight])
|
|
|
+ pdf.addImage(canvas.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, domWidth, domHeight)
|
|
|
+ pdf.save(fileName)
|
|
|
+ }
|
|
|
+ resetLoaing(false)
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 导出PNG
|
|
|
+ * @param domID 需要输出PNG的页面id
|
|
|
+ * @param fileName 文件名
|
|
|
+ * @param bkcolor 背景色
|
|
|
+ */
|
|
|
+export const exp2png = async (domID: string, fileName: string, bkcolor: string) => {
|
|
|
+ resetLoaing(true)
|
|
|
+ window.scroll(0, 0) // 首先先顶部
|
|
|
+ const design = document.getElementById(domID) as HTMLElement
|
|
|
+ if (!design) return
|
|
|
+ const imgHeight = design.offsetHeight // 获取DOM高度
|
|
|
+ const imgWidth = design.offsetWidth // 获取DOM宽度
|
|
|
+ const scale = window.devicePixelRatio <= 3 ? 3 : window.devicePixelRatio // 获取设备像素比
|
|
|
+ const canvas = await html2canvas(design, {
|
|
|
+ backgroundColor: bkcolor, // 设置背景颜色
|
|
|
+ useCORS: true, // 允许图片跨域
|
|
|
+ scale: scale, // 缩放3倍，使得图片更加清晰=>越清晰图片越大
|
|
|
+ width: imgWidth,
|
|
|
+ height: imgHeight,
|
|
|
+ imageTimeout: 5000 // 设置图片的超时，设置0为禁用
|
|
|
+ })
|
|
|
+ const download = (url: string, fileName: string) => {
|
|
|
+ let aLink = document.createElement('a')
|
|
|
+ aLink.href = url
|
|
|
+ aLink.download = fileName || '' // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
|
|
|
+ let event
|
|
|
+ if (window.MouseEvent) event = new MouseEvent('click')
|
|
|
+ else {
|
|
|
+ event = document.createEvent('MouseEvents')
|
|
|
+ event.initMouseEvent(
|
|
|
+ 'click',
|
|
|
+ true,
|
|
|
+ false,
|
|
|
+ window,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ false,
|
|
|
+ false,
|
|
|
+ false,
|
|
|
+ false,
|
|
|
+ 0,
|
|
|
+ null
|
|
|
+ )
|
|
|
+ }
|
|
|
+ aLink.dispatchEvent(event)
|
|
|
+ }
|
|
|
+ // 两种下载方式url + blob
|
|
|
+ let imgURL = canvas.toDataURL('image/png') as any
|
|
|
+ if (typeof imgURL === 'object' && imgURL instanceof Blob) {
|
|
|
+ imgURL = URL.createObjectURL(imgURL) // 创建blob地址
|
|
|
+ download(imgURL, fileName)
|
|
|
+ } else {
|
|
|
+ // url + 请求得到blob
|
|
|
+ let htmlrq = new XMLHttpRequest() as any
|
|
|
+ htmlrq.open('GET', imgURL, true)
|
|
|
+ htmlrq.responseType = 'blob'
|
|
|
+ htmlrq.onload = function (e: any) {
|
|
|
+ if (e.target.status === 200) {
|
|
|
+ imgURL = URL.createObjectURL(e.target.response) // 创建blob地址
|
|
|
+ download(imgURL, fileName)
|
|
|
+ } else {
|
|
|
+ console.error('下载错误')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ htmlrq.send()
|
|
|
+ }
|
|
|
+ resetLoaing(false)
|
|
|
+}
|
