|
@@ -1,24 +1,7 @@
|
|
|
import html2canvas from "html2canvas";
|
|
import html2canvas from "html2canvas";
|
|
|
import JSPDF from "jspdf";
|
|
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
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-}
|
|
|
|
|
|
|
+import { downloadFile } from "./downloadFile";
|
|
|
|
|
+import * as XLSX from 'xlsx'
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* 导出PDF
|
|
* 导出PDF
|
|
@@ -32,7 +15,7 @@ const resetLoaing = (type: boolean) => {
|
|
|
export const exp2pdf = async (domID: string, fileName: string, type = 'A4', wMultiple = null, hMultiple = null) => {
|
|
export const exp2pdf = async (domID: string, fileName: string, type = 'A4', wMultiple = null, hMultiple = null) => {
|
|
|
const dom = document.getElementById(domID)
|
|
const dom = document.getElementById(domID)
|
|
|
if (!dom) return
|
|
if (!dom) return
|
|
|
- resetLoaing(true)
|
|
|
|
|
|
|
+ // loading
|
|
|
const domHeight = dom.offsetHeight // 获取DOM高度
|
|
const domHeight = dom.offsetHeight // 获取DOM高度
|
|
|
const domWidth = dom.offsetWidth // 获取DOM宽度
|
|
const domWidth = dom.offsetWidth // 获取DOM宽度
|
|
|
const canvas = await html2canvas(dom, {
|
|
const canvas = await html2canvas(dom, {
|
|
@@ -70,7 +53,7 @@ export const exp2pdf = async (domID: string, fileName: string, type = 'A4', wMul
|
|
|
pdf.addImage(canvas.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, domWidth, domHeight)
|
|
pdf.addImage(canvas.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, domWidth, domHeight)
|
|
|
pdf.save(fileName)
|
|
pdf.save(fileName)
|
|
|
}
|
|
}
|
|
|
- resetLoaing(false)
|
|
|
|
|
|
|
+ // loading
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -80,7 +63,7 @@ export const exp2pdf = async (domID: string, fileName: string, type = 'A4', wMul
|
|
|
* @param bkcolor 背景色
|
|
* @param bkcolor 背景色
|
|
|
*/
|
|
*/
|
|
|
export const exp2png = async (domID: string, fileName: string, bkcolor: string) => {
|
|
export const exp2png = async (domID: string, fileName: string, bkcolor: string) => {
|
|
|
- resetLoaing(true)
|
|
|
|
|
|
|
+ // loading
|
|
|
window.scroll(0, 0) // 首先先顶部
|
|
window.scroll(0, 0) // 首先先顶部
|
|
|
const design = document.getElementById(domID) as HTMLElement
|
|
const design = document.getElementById(domID) as HTMLElement
|
|
|
if (!design) return
|
|
if (!design) return
|
|
@@ -95,53 +78,95 @@ export const exp2png = async (domID: string, fileName: string, bkcolor: string)
|
|
|
height: imgHeight,
|
|
height: imgHeight,
|
|
|
imageTimeout: 5000 // 设置图片的超时,设置0为禁用
|
|
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
|
|
|
|
|
- )
|
|
|
|
|
|
|
+ const imgURL = canvas.toDataURL('image/png') as any
|
|
|
|
|
+ downloadFile(imgURL,fileName)
|
|
|
|
|
+ // loading
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+ * 解析excel表格
|
|
|
|
|
+ * @param file 文件
|
|
|
|
|
+ * @returns
|
|
|
|
|
+ */
|
|
|
|
|
+export const exp2json = async (file: File) => {
|
|
|
|
|
+ return await new Promise((resolve, reject) => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const reader = new FileReader()
|
|
|
|
|
+ reader.onload = (e) => {
|
|
|
|
|
+ const wb = XLSX.read(e.target?.result, {
|
|
|
|
|
+ type: 'binary'
|
|
|
|
|
+ }) // 读取完成的数据
|
|
|
|
|
+ // 转成json header解析第一行标题
|
|
|
|
|
+ const data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 })
|
|
|
|
|
+ resolve(data)
|
|
|
|
|
+ }
|
|
|
|
|
+ reader.readAsBinaryString(file)
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.log('解析错误')
|
|
|
|
|
+ reject(error)
|
|
|
}
|
|
}
|
|
|
- aLink.dispatchEvent(event)
|
|
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+ * dom导出excel
|
|
|
|
|
+ * @param domID domID
|
|
|
|
|
+ * @param fileName 文件名
|
|
|
|
|
+ */
|
|
|
|
|
+export const dom2excel = (domID: string, fileName: string) => {
|
|
|
|
|
+ const dom = document.getElementsByTagName(domID)
|
|
|
|
|
+ if (!dom) return
|
|
|
|
|
+ const wb = XLSX.utils.table_to_book(dom[0])
|
|
|
|
|
+ const baty = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
|
|
|
|
|
+ // 字符串转ArrayBuffer
|
|
|
|
|
+ const s2ab = (s: any) => {
|
|
|
|
|
+ const buf = new ArrayBuffer(s.length)
|
|
|
|
|
+ const view = new Uint8Array(buf)
|
|
|
|
|
+ for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
|
|
|
|
|
+ return buf
|
|
|
}
|
|
}
|
|
|
- // 两种下载方式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 = (e: { target: { status: number; response: Blob | MediaSource; } })=> {
|
|
|
|
|
- if (e.target.status === 200) {
|
|
|
|
|
- imgURL = URL.createObjectURL(e.target.response) // 创建blob地址
|
|
|
|
|
- download(imgURL, fileName)
|
|
|
|
|
- } else {
|
|
|
|
|
- console.error('下载错误')
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ const blob = new Blob([s2ab(baty)], { type: 'application/octet-stream' })
|
|
|
|
|
+ downloadFile(blob, fileName + '.xlsx')
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+ * array导出excel表格
|
|
|
|
|
+ * @param arr 数据是数组包含的对象
|
|
|
|
|
+ * @param fileName 名字
|
|
|
|
|
+ */
|
|
|
|
|
+export const exp2excel = (arr: object[], fileName:string,cellMerges?:Array<any>) => {
|
|
|
|
|
+ const sheet = XLSX.utils.json_to_sheet(arr);
|
|
|
|
|
+ // excel宽高设置
|
|
|
|
|
+ sheet["!cols"] = arr.map(() => {
|
|
|
|
|
+ return { wch: 30 }
|
|
|
|
|
+ })
|
|
|
|
|
+ if(cellMerges){
|
|
|
|
|
+ sheet['!merges'] = cellMerges; // <====合并单元格
|
|
|
|
|
+ }
|
|
|
|
|
+ // 转blob
|
|
|
|
|
+ const sheet2blob = (sheet: any, sheetName='sheet1') => {
|
|
|
|
|
+ const workbook = {
|
|
|
|
|
+ SheetNames: [sheetName],
|
|
|
|
|
+ Sheets: {} as any
|
|
|
|
|
+ };
|
|
|
|
|
+ workbook.Sheets[sheetName] = sheet;
|
|
|
|
|
+ // 生成excel的配置项
|
|
|
|
|
+ const wopts = {
|
|
|
|
|
+ bookType: 'xlsx', // 要生成的文件类型
|
|
|
|
|
+ bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
|
|
|
|
|
+ type: 'binary'
|
|
|
|
|
+ } as any
|
|
|
|
|
+ const wbout = XLSX.write(workbook, wopts);
|
|
|
|
|
+ // 字符串转ArrayBuffer
|
|
|
|
|
+ const s2ab = (s: string) => {
|
|
|
|
|
+ let buf = new ArrayBuffer(s.length);
|
|
|
|
|
+ let view = new Uint8Array(buf);
|
|
|
|
|
+ for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
|
|
|
|
+ return buf;
|
|
|
}
|
|
}
|
|
|
- htmlrq.send()
|
|
|
|
|
|
|
+ const blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
|
|
|
|
|
+
|
|
|
|
|
+ return blob;
|
|
|
}
|
|
}
|
|
|
- resetLoaing(true)
|
|
|
|
|
|
|
+ downloadFile(sheet2blob(sheet), fileName + '.xlsx')
|
|
|
}
|
|
}
|