生成脑图，和导出脑图图片或者文件功能

原创已于 2024-01-02 14:43:40 修改 · 1.1k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

猫七七s

关注

标签

#前端 #java #javascript

分类前端开发

于 2023-12-04 16:52:11 首次发布

文章详细描述了如何在Vue项目中利用Transformer和Markmap组件创建SVG思维导图，并提供了HTML2canvas用于导出为PNG图片以及导出Markdown和纯文本文件的代码示例。

在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);
};