import html2canvas from 'html2canvas'
|
import JsPDF from 'jspdf'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { useEmbedded } from '@/store/modules/embedded'
|
import { storeToRefs } from 'pinia'
|
import { findResourceAsBase64 } from '@/api/staticResource'
|
import FileSaver from 'file-saver'
|
import { deepCopy } from '@/utils/utils'
|
import { domToPng } from 'modern-screenshot'
|
const embeddedStore = useEmbedded()
|
const dvMainStore = dvMainStoreWithOut()
|
const { canvasStyleData, componentData, canvasViewInfo, canvasViewDataInfo, dvInfo } =
|
storeToRefs(dvMainStore)
|
const basePath = import.meta.env.VITE_API_BASEPATH
|
|
export function formatterUrl(url: string) {
|
return url.replace('//de2api', '/de2api')
|
}
|
export function imgUrlTrans(url) {
|
if (url) {
|
if (typeof url === 'string' && url.indexOf('static-resource') > -1) {
|
const rawUrl = url
|
? (basePath.endsWith('/') ? basePath.substring(0, basePath.length - 1) : basePath) + url
|
: null
|
return formatterUrl(
|
embeddedStore.baseUrl
|
? `${embeddedStore.baseUrl}${
|
rawUrl.startsWith('/api') ? rawUrl.slice(5) : rawUrl
|
}`.replace('com//', 'com/')
|
: rawUrl
|
)
|
} else {
|
return formatterUrl(url.replace('com//', 'com/'))
|
}
|
}
|
}
|
|
export function download2AppTemplate(downloadType, canvasDom, name, attachParams, callBack?) {
|
try {
|
findStaticSource(function (staticResource) {
|
html2canvas(canvasDom).then(canvas => {
|
const canvasViewDataTemplate = deepCopy(canvasViewInfo.value)
|
Object.keys(canvasViewDataTemplate).forEach(viewId => {
|
canvasViewDataTemplate[viewId].data = canvasViewDataInfo.value[viewId]
|
})
|
const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
|
const templateName = attachParams?.appName ? attachParams.appName : name
|
if (snapshot !== '') {
|
const templateInfo = {
|
name: templateName,
|
templateType: 'self',
|
snapshot: snapshot,
|
dvType: dvInfo.value.type,
|
nodeType: downloadType,
|
version: 3,
|
canvasStyleData: JSON.stringify(canvasStyleData.value),
|
componentData: JSON.stringify(componentData.value),
|
dynamicData: JSON.stringify(canvasViewDataTemplate),
|
staticResource: JSON.stringify(staticResource || {}),
|
appData: attachParams ? JSON.stringify(attachParams) : null
|
}
|
const blob = new Blob([JSON.stringify(templateInfo)], { type: '' })
|
if (downloadType === 'template') {
|
FileSaver.saveAs(blob, name + '-TEMPLATE.DET2')
|
} else if (downloadType === 'app') {
|
FileSaver.saveAs(blob, templateName + '-APP.DET2APP')
|
}
|
}
|
if (callBack) {
|
callBack()
|
}
|
})
|
})
|
} catch (e) {
|
if (callBack) {
|
callBack()
|
}
|
console.error(e)
|
}
|
}
|
|
export function downloadCanvas(type, canvasDom, name, callBack?) {
|
// const canvasDom = document.getElementById(canvasId)
|
if (canvasDom) {
|
html2canvas(canvasDom)
|
.then(canvas => {
|
const dom = document.body.appendChild(canvas)
|
dom.style.display = 'none'
|
document.body.removeChild(dom)
|
const dataUrl = dom.toDataURL('image/png', 1)
|
if (type === 'img') {
|
const a = document.createElement('a')
|
a.setAttribute('download', name)
|
a.href = dataUrl
|
document.body.appendChild(a)
|
a.click()
|
document.body.removeChild(a)
|
} else {
|
const contentWidth = canvasDom.offsetWidth
|
const contentHeight = canvasDom.offsetHeight
|
const lp = contentWidth > contentHeight ? 'l' : 'p'
|
const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight])
|
PDF.addImage(dataUrl, 'PNG', 0, 0, contentWidth, contentHeight)
|
PDF.save(name + '.pdf')
|
}
|
if (callBack) {
|
callBack()
|
}
|
})
|
.catch(error => {
|
console.error('oops, something went wrong!', error)
|
if (callBack) {
|
callBack()
|
}
|
})
|
}
|
}
|
|
export function downloadCanvas2(type, canvasDom, name, callBack?) {
|
domToPng(canvasDom, { scale: 3 })
|
.then(dataUrl => {
|
if (type === 'img') {
|
const a = document.createElement('a')
|
a.setAttribute('download', name + '.png')
|
a.href = dataUrl
|
document.body.appendChild(a)
|
a.click()
|
document.body.removeChild(a)
|
} else {
|
const contentWidth = canvasDom.offsetWidth
|
const contentHeight = canvasDom.offsetHeight
|
const lp = contentWidth > contentHeight ? 'l' : 'p'
|
const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight])
|
PDF.addImage(dataUrl, 'PNG', 0, 0, contentWidth, contentHeight)
|
PDF.save(name + '.pdf')
|
}
|
if (callBack) {
|
callBack()
|
}
|
})
|
.catch(error => {
|
if (callBack) {
|
callBack()
|
}
|
console.error('oops, something went wrong!', error)
|
})
|
}
|
|
export function dataURLToBlob(dataUrl) {
|
// ie 图片转格式
|
const arr = dataUrl.split(',')
|
const mime = arr[0].match(/:(.*?);/)[1]
|
const bStr = atob(arr[1])
|
let n = bStr.length
|
const u8arr = new Uint8Array(n)
|
while (n--) {
|
u8arr[n] = bStr.charCodeAt(n)
|
}
|
return new Blob([u8arr], { type: mime })
|
}
|
|
function findStaticSourceInner(componentDataInfo, staticResource) {
|
componentDataInfo?.forEach(item => {
|
if (
|
typeof item.commonBackground.outerImage === 'string' &&
|
item.commonBackground.outerImage.indexOf('static-resource') > -1
|
) {
|
staticResource.push(item.commonBackground.outerImage)
|
}
|
if (
|
item.component === 'Picture' &&
|
item.propValue['url'] &&
|
typeof item.propValue['url'] === 'string' &&
|
item.propValue['url'].indexOf('static-resource') > -1
|
) {
|
staticResource.push(item.propValue['url'])
|
} else if (
|
item.component === 'UserView' &&
|
item.innerType === 'picture-group' &&
|
item.propValue['urlList'] &&
|
item.propValue['urlList'].length > 0
|
) {
|
item.propValue['urlList'].forEach(urlInfo => {
|
if (urlInfo.url.indexOf('static-resource') > -1) {
|
staticResource.push(urlInfo.url)
|
}
|
})
|
} else if (item.component === 'Group') {
|
findStaticSourceInner(item.propValue, staticResource)
|
} else if (item.component === 'DeTabs') {
|
item.propValue.forEach(tabItem => {
|
findStaticSourceInner(tabItem.componentData, staticResource)
|
})
|
}
|
})
|
}
|
|
// 解析静态文件
|
export function findStaticSource(callBack) {
|
const staticResource = []
|
// 系统背景文件
|
if (
|
typeof canvasStyleData.value.background === 'string' &&
|
canvasStyleData.value.background.indexOf('static-resource') > -1
|
) {
|
staticResource.push(canvasStyleData.value.background)
|
}
|
findStaticSourceInner(componentData.value, staticResource)
|
if (staticResource.length > 0) {
|
try {
|
findResourceAsBase64({ resourcePathList: staticResource }).then(rsp => {
|
callBack(rsp.data)
|
})
|
} catch (e) {
|
console.error('findResourceAsBase64 error', e)
|
callBack()
|
}
|
} else {
|
setTimeout(() => {
|
callBack()
|
}, 0)
|
}
|
}
|
