|
@@ -6,13 +6,15 @@ import { editPreview } from '@/store/action/layout'
|
|
|
import { handleCopyClick } from '@/utils/copyTxt'
|
|
|
import { MessageFu } from '@/utils/message'
|
|
|
import html2canvas from 'html2canvas'
|
|
|
+import { domShowFu } from '@/utils/domShow'
|
|
|
|
|
|
function PreviewOperate({ src }: { src?: string }) {
|
|
|
const dispatch = useDispatch()
|
|
|
const iframeRef = useRef<HTMLIFrameElement>(null)
|
|
|
+ const downloadRef = useRef<HTMLButtonElement>(null)
|
|
|
// 用于标记 iframe 是否加载完成且文档就绪
|
|
|
const [isIframeReady, setIsIframeReady] = useState(false)
|
|
|
- const cachedImageUrl = useRef<string | null>(null)
|
|
|
+ // const cachedImageUrl = useRef<string | null>(null)
|
|
|
|
|
|
const copyLink = useCallback(() => {
|
|
|
if (src) {
|
|
@@ -23,6 +25,7 @@ function PreviewOperate({ src }: { src?: string }) {
|
|
|
}, [src])
|
|
|
|
|
|
const downloadImg = useCallback(async () => {
|
|
|
+ domShowFu('#AsyncSpinLoding', true)
|
|
|
if (iframeRef.current && isIframeReady) {
|
|
|
try {
|
|
|
const iframeDocument = iframeRef.current.contentDocument!
|
|
@@ -34,12 +37,13 @@ function PreviewOperate({ src }: { src?: string }) {
|
|
|
virInput.style.display = 'flex'
|
|
|
}
|
|
|
const canvas = await html2canvas(iframeDocument.body)
|
|
|
- cachedImageUrl.current = canvas.toDataURL('image/png')
|
|
|
- // const imageDataUrl = canvas.toDataURL('image/png')
|
|
|
- // const link = document.createElement('a')
|
|
|
- // link.download = 'preview.png'
|
|
|
- // link.href = imageDataUrl
|
|
|
- // link.click()
|
|
|
+ // cachedImageUrl.current = canvas.toDataURL('image/png')
|
|
|
+ const imageDataUrl = canvas.toDataURL('image/png')
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.download = 'preview.png'
|
|
|
+ link.href = imageDataUrl
|
|
|
+ link.click()
|
|
|
+ domShowFu('#AsyncSpinLoding', false)
|
|
|
if (elInput && virInput) {
|
|
|
elInput.style.display = 'flex'
|
|
|
virInput.style.display = 'none'
|
|
@@ -51,18 +55,18 @@ function PreviewOperate({ src }: { src?: string }) {
|
|
|
}
|
|
|
}, [isIframeReady])
|
|
|
|
|
|
- const download = useCallback(async () => {
|
|
|
- if (!cachedImageUrl.current) {
|
|
|
- MessageFu.error('正在加载...')
|
|
|
- await downloadImg()
|
|
|
- return
|
|
|
- }
|
|
|
+ // const download = useCallback(async () => {
|
|
|
+ // if (!cachedImageUrl.current) {
|
|
|
+ // MessageFu.error('正在加载...')
|
|
|
+ // await downloadImg()
|
|
|
+ // return
|
|
|
+ // }
|
|
|
|
|
|
- const link = document.createElement('a')
|
|
|
- link.download = 'preview.png'
|
|
|
- link.href = cachedImageUrl.current
|
|
|
- link.click()
|
|
|
- }, [downloadImg])
|
|
|
+ // const link = document.createElement('a')
|
|
|
+ // link.download = 'preview.png'
|
|
|
+ // link.href = cachedImageUrl.current
|
|
|
+ // link.click()
|
|
|
+ // }, [downloadImg])
|
|
|
|
|
|
useEffect(() => {
|
|
|
const iframe = iframeRef.current
|
|
@@ -81,6 +85,10 @@ function PreviewOperate({ src }: { src?: string }) {
|
|
|
// 替换为正确的 CSS 路径,请根据实际情况修改
|
|
|
link.href = 'https://sit-kelamayi.4dage.com/mini/assets/index-BNWQR98R.css'
|
|
|
}
|
|
|
+ if (link.href.includes('index-DqAPdNY3.css')) {
|
|
|
+ // 替换为正确的 CSS 路径,请根据实际情况修改
|
|
|
+ link.href = 'https://sit-kelamayi.4dage.com/mini/assets/index-DqAPdNY3.css'
|
|
|
+ }
|
|
|
})
|
|
|
setIsIframeReady(true)
|
|
|
} else {
|
|
@@ -98,6 +106,14 @@ function PreviewOperate({ src }: { src?: string }) {
|
|
|
}
|
|
|
}, [])
|
|
|
|
|
|
+ // useEffect(() => {
|
|
|
+ // if (isIframeReady) {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // downloadRef.current?.click()
|
|
|
+ // }, 300)
|
|
|
+ // }
|
|
|
+ // }, [isIframeReady])
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.PreviewOperate}>
|
|
|
<div className='PreviewOperateMain'>
|
|
@@ -113,7 +129,7 @@ function PreviewOperate({ src }: { src?: string }) {
|
|
|
)}
|
|
|
<div className='copyLink'>
|
|
|
<Button onClick={copyLink}>复制链接</Button>
|
|
|
- <Button onClick={download} disabled={!isIframeReady}>
|
|
|
+ <Button ref={downloadRef} onClick={downloadImg} disabled={!isIframeReady}>
|
|
|
下载图片
|
|
|
</Button>
|
|
|
<Button onClick={() => dispatch(editPreview({ isOpenPreview: false }))}>关闭</Button>
|