Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-20 00:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/issues/2919

Browse source
This commit is contained in:
Vanessa 2022-11-14 19:00:56 +08:00
parent f749ff5fb5
commit 6e3a826ac6
1 changed files with 13 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/src/protyle/export/util.ts
View file

@ -10,14 +10,7 @@ import {addScript} from "../util/addScript";
import {isMobile} from "../../util/functions"; import {isMobile} from "../../util/functions";
import {Constants} from "../../constants"; import {Constants} from "../../constants";
import {highlightRender} from "../markdown/highlightRender"; import {highlightRender} from "../markdown/highlightRender";
import {mathRender} from "../markdown/mathRender"; import {processRender} from "../util/processCode";
import {mermaidRender} from "../markdown/mermaidRender";
import {flowchartRender} from "../markdown/flowchartRender";
import {graphvizRender} from "../markdown/graphvizRender";
import {chartRender} from "../markdown/chartRender";
import {mindmapRender} from "../markdown/mindmapRender";
import {abcRender} from "../markdown/abcRender";
import {plantumlRender} from "../markdown/plantumlRender";
declare const html2canvas: (element: Element) => Promise<any>; declare const html2canvas: (element: Element) => Promise<any>;
export const afterExport = (exportPath: string, msgId: string) => { export const afterExport = (exportPath: string, msgId: string) => {
@ -35,8 +28,8 @@ export const afterExport = (exportPath: string, msgId: string) => {
export const exportImage = (id: string) => { export const exportImage = (id: string) => {
const exportDialog = new Dialog({ const exportDialog = new Dialog({
title: window.siyuan.languages.exportAsImage, title: window.siyuan.languages.exportAsImage,
content: `<div class="b3-dialog__content" style="max-height: 70vh;overflow: auto;${isMobile()?"padding:8px;":""}"> content: `<div class="b3-dialog__content" style="max-height: 70vh;overflow: auto;${isMobile() ? "padding:8px;" : ""}">
<div style="${isMobile()?"padding: 16px;margin: 16px 0":"padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"> <div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview">
<div class="fn__loading" style="left:0"><img height="128px" width="128px" src="stage/loading-pure.svg"></div> <div class="fn__loading" style="left:0"><img height="128px" width="128px" src="stage/loading-pure.svg"></div>
</div> </div>
<div class="ft__smaller ft__on-surface fn__flex"><img style="height: 18px;margin: 0 8px" src="stage/icon.png">${window.siyuan.languages.exportBySiYuan}</div> <div class="ft__smaller ft__on-surface fn__flex"><img style="height: 18px;margin: 0 8px" src="stage/icon.png">${window.siyuan.languages.exportBySiYuan}</div>
@ -55,16 +48,8 @@ export const exportImage = (id: string) => {
}, (response) => { }, (response) => {
const previewElement = exportDialog.element.querySelector("#preview") const previewElement = exportDialog.element.querySelector("#preview")
previewElement.innerHTML = response.data.content; previewElement.innerHTML = response.data.content;
processRender(previewElement);
highlightRender(previewElement); highlightRender(previewElement);
mathRender(previewElement);
mermaidRender(previewElement);
flowchartRender(previewElement);
graphvizRender(previewElement);
chartRender(previewElement);
mindmapRender(previewElement);
abcRender(previewElement);
plantumlRender(previewElement);
previewElement.querySelectorAll("table").forEach((item: HTMLElement) => { previewElement.querySelectorAll("table").forEach((item: HTMLElement) => {
if (item.clientWidth > item.parentElement.clientWidth) { if (item.clientWidth > item.parentElement.clientWidth) {
// @ts-ignore // @ts-ignore
@ -81,13 +66,15 @@ export const exportImage = (id: string) => {
setTimeout(() => { setTimeout(() => {
addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => { addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
html2canvas(previewElement.parentElement).then((canvas) => { html2canvas(previewElement.parentElement).then((canvas) => {
const link = document.createElement("a"); canvas.toBlob((blob: Blob) => {
link.download = response.data.name + ".png"; const formData = new FormData();
link.href = "data:" + canvas.toDataURL("image/png"); formData.append("file", blob, response.data.name + ".png");
link.click(); formData.append("type", "image/png");
link.remove(); fetchPost("/api/export/exportAsFile", formData, () => {
hideMessage(msgId); hideMessage(msgId);
exportDialog.destroy(); exportDialog.destroy();
});
});
}); });
}); });
}, Constants.TIMEOUT_TRANSITION) }, Constants.TIMEOUT_TRANSITION)