在template中的代码
<div class="dialogues-content" ref="mindmapContainer" v-loading="loading">
<!-- 这个div是为了使用html2canvas把svg保存成png时使用的-->
<svg ref="mindmap" class="mindmap"></svg>
<div class="buttons">
<div class="change" @click="saveToWord">导出成文件</div>
<div class="exports" @click="saveToPng">导出成图片</div>
</div>
</div>
在script中的代码:
import { Transformer } from "markmap-lib"
import { Markmap } from "markmap-view"
const mindmap = ref(null);
const mindmapContainer = ref(null);
// AI返回内容
const outputText = ref(
`# 思维导图 \n## 1. 左边输入框输入您的主题 \n## 2. 点击生成脑图按钮 \n## 3. 等待AI生成结果 \n`
);
//初始化
const init = () => {
let markmap = Markmap.create(mindmap.value);
const { root } = transformer.transform(outputText.value);
markmap.setData(root);
markmap.fit();
}
//流式生成脑图
const articleToMindmapApi = async (datas) => {
try {
const { body, status } = await fetchAPI('/api/gaa/chat/analysisMindMap', datas);
if (body) {
const reader = body.getReader();
let partialLine = "";
outputText.value = "";
let index = 0;
while (true) {
const { value, done } = await reader.read();
if (done) {
if (isJsonString(partialLine) == true) {
const json = JSON.parse(partialLine)
if (json.code == 7001 || json.code == 7005 || json.code == 7006 || json.code == 7002) {
ElMessage.warning('请重新登录')
router.push('/login')
} else {
ElMessage.warning(json.msg)
return;
}
}
break;
}
const decodedText = decoder.decode(value, { stream: true });
if (status !== 200) {
const json = JSON.parse(decodedText); // start with "data: "
ElMessage.warning(json.msg)
return;
}
partialLine = partialLine + decodedText;
if (index > 10 && Math.random() > 0.8) {
outputText.value = partialLine;
}
index++;
}
mindmap.value.innerHTML = ""
outputText.value = partialLine;
inputValue.value = ''
init()
// fetchAPIGetsApi()
inputObj.value.url = ''
inputObj.value.fileContent = ''
inputObj.value.text = ''
}
} catch (error) {
console.log(error.message);
} finally {
loading.value = false;
}
}
导出图片和文件功能
在saveTools.js文件写代码:
import { ref } from 'vue';
import html2canvas from "html2canvas"
// import jsPDF from 'jspdf'; //如果需要导出pdf,需要引入jspdf
// 内部使用,完成创建连接,保存文件的动作
const saveFile = (fileName, dataUrl) =>{
const link = document.createElement("a");
link.href = dataUrl;
link.download = fileName;
link.click();
URL.revokeObjectURL(dataUrl);
}
// mindmap导出png图片
const SvgToPng = async (container) => {
console.log("Start to download image...");
html2canvas(container, {
logging: false, //日志开关,便于查看html2canvas的内部执行流程
width: container.clientWidth, //dom 原始宽度
height: container.clientHeight,
scrollY: 0,
scrollX: 0,
useCORS: true // 【重要】开启跨域配置
}).then((canvas) => {
const pngUrl = canvas.toDataURL("image/png"); // 将Canvas转换为PNG图像数据
/* 如果需要到处pdf
const pdf = new jsPDF(); // 创建PDF文档
const imgProps = pdf.getImageProperties(imgData); // 获取图像属性
const pdfWidth = pdf.internal.pageSize.getWidth(); // 获取PDF页面宽度
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; // 计算PDF页面高度
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); // 将图像添加到PDF文档
pdf.save('saved.png'); // 保存PDF文档为PNG图像
*/
saveFile("mindmap.png", pngUrl);
});
};
// mindmap导出markdown文件
const SvgToMarkdown = (content) => {
console.log("Start to download markdown...");
// let text = content.replace(/```markdown/g, "");
// text = text.replace(/```/g, "");
const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
const url = URL.createObjectURL(blob);
saveFile("save.md", url)
};
const TextToFile = (text) => {
console.log("Start to download txt...");
const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
const url = URL.createObjectURL(blob);
saveFile("save.txt", url)
}
export default {
SvgToPng,
SvgToMarkdown,
TextToFile,
};
引入saveTools.js文件使用里面的方法
import saveTools from "@/utils/saveTools"
//导出图片
const saveToPng = async () => {
await saveTools.SvgToPng(mindmapContainer.value);
};
//导出文件
const saveToWord = async () => {
await saveTools.TextToFile(outputText.value);
};