Drawio接入Vue项目

奔跑的蜗牛=^_^=

于 2025-03-22 15:28:33 发布

阅读量1k

点赞数 29

文章标签：笔记

本文链接：https://blog.csdn.net/m0_48985355/article/details/145137585

版权

1. github上clone Drawio项目；

2.部署drawio到自己服务器，代理drawio\src\main\webapp目录，例：http://localhost:8080；

3.<iframe src="http://localhost:8080?参数" width="800" height="600" ></iframe>

<template>
  <div class="container drawio-editor-box">
    <iframe id="drawio-iframe" :src="url" frameborder="0" width="100%" height="100%"></iframe>
  </div>
</template>

<script setup>
const url = 'embed=1&proto=json&noSaveBtn=1&noExitBtn=1&saveAndExit=0&pages=1&ui=simple&spin=1&lang=zh?';
const initContent = "";
// 监听返回的图片数据
const drawioContent = ref('');

function HTMLEncode(html) {
  var temp = document.createElement("div");
  temp.textContent != null
    ? (temp.textContent = html)
    : (temp.innerText = html);
  var output = temp.innerHTML;
  temp = null;
  return output;
}
function processSvg(xml, data, cb) {
  const content = HTMLEncode(xml);
  data = data.split(",")[1];
  data = atob(data);
  const binaryArr = new Uint8Array(data.length);
  for (let i = 0; i < data.length; i++) {
    binaryArr[i] = data.charCodeAt(i);
  }
  const blob = new Blob([binaryArr], { type: "image/svg+xml" });
  const reader = new FileReader();
  reader.readAsText(blob);
  reader.onload = () => {
    const txt = reader.result;
    if (typeof cb === "function")
      cb(txt.replace("<svg ", `<svg content='${content}' `));
  };
}
onMounted(() => {
  initPage(initContent)
});

function initPage(url) {
  bindEventListener()

  // 清空loading
  setTimeout(() => {
    sendMsgToDrawio({
      action: "spinner",
      message: "",
      show: false,
      enabled: true
    });
  }, 300);

  if (!url) {
    // 清空编辑区
    setTimeout(() => {
      sendMsgToDrawio({
        action: "load",
        autosave: 1
      });
    }, 500);
    return;
  }

  if (url.indexOf("<svg") < 0) {
    setTimeout(() => {
      sendMsgToDrawio({
        action: "load",
        xml: url,
        autosave: 1
      });
    }, 500);
    return;
  }
}
function bindEventListener() {
  window.addEventListener("message", e => {
    // console.log('789', e);
    if (!e.data) return;
    let msg = null;
    try {
      msg = JSON.parse(e.data);
    } catch (error) { }

    if (!msg || typeof msg !== "object") return;
    const { event } = msg;

    switch (event) {
      case "init":
        window.dispatchEvent(new Event("drawioLoaded"));
        break;
      case "export"://导出
        if (!msg.data) return;
        if (msg.data.indexOf("data:image/png") !== -1) {
          const ev = new Event("drawioImageCreated");
          ev.imageType = "png";
          ev.imageContent = msg.data;
          window.dispatchEvent(ev);
        } else {
          processSvg(msg.xml, msg.data, img => {
            const ev = new Event("drawioImageCreated");
            ev.imageType = "svg";
            ev.imageContent = img;
            ev.xml = msg.xml; // 用于导出恢复
            drawioContent.value = msg.xml;
            window.dispatchEvent(ev);
          });
        }
        break;
      case "autosave":
        sendMsgToDrawio({
          action: "export",
          format: "svg",
          spinKey: "saving"
        });
        break;
      default:
        break;
    }
  });
}
function sendMsgToDrawio(obj) {
  const iframe = document.getElementById("drawio-iframe");
  iframe.contentWindow.postMessage(JSON.stringify(obj), "*");
}
defineExpose({ drawioContent });
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}
</style>

draw嵌入模式

draw嵌入模式 | Draw

如果使用embed = 1 URL参数，则客户端以嵌入模式运行，并且在加载页面时，页面将向打开器或父级发送“就绪”消息。仅https://embed.diagrams.net支持此模式。收到就绪消息后，图表数据可以XML或压缩XML的形式发送。如果分别选择“应用”或“取消”，它将返回XML或空字符串。以下URL参数在嵌入模式下可用：

embed: 设置为true时，将以嵌入模式加载Draw.io，隐藏工具栏和菜单栏，只显示图表区域。
lightbox: 设置为true时，将以灯箱模式加载Draw.io，覆盖在当前页面上方，使用户无法与页面交互。
proto: 设置为true时，将以原型模式加载Draw.io，隐藏工具栏和菜单栏，只显示图表区域，并禁用保存和导出功能。
spin: 设置为true时，将在加载Draw.io时显示一个加载动画，以指示正在加载过程中。
nav: 设置为false时，将隐藏绘图区域左侧的导航栏，使用户无法查看和选择其他图形库。
lang: 设置为特定的语言代码，可以将Draw.io的界面语言设置为指定的语言，例如lang=en表示将界面语言设置为英语。
ui: 设置为特定的UI配置文件URL，可以加载自定义的UI配置文件，以自定义Draw.io的界面布局和样式。
spin = 1：在等待以嵌入模式加载图数据时显示“ 正在加载…”微调器。
Modify = 0：选择“保存”后，禁止在嵌入模式下更新修改后的状态，并在进行更改后启用状态消息的更新。如果使用0，则更改后状态栏将清除。否则，此值将用作资源密钥。您可以在加载消息中指定此设置，而不是使用此URL参数。
keepmodified = 1： 如果修改指定资源键，则用于在选择保存后保留修改后的状态。
library = 1：指定是否应在嵌入模式下启用库。默认设置为禁用（0）。
noSaveBtn = 1：显示“保存并退出”按钮，而不是“保存”按钮。您可以在加载消息中指定此设置，而不是使用此URL参数。如果使用此选项，则将忽略saveAndExit URL参数。
saveAndExit = 1：显示另一个“保存并退出”按钮。您可以在加载消息中指定此设置，而不是使用此URL参数。如果使用noSaveBtn = 1，则可以通过saveAndExit = 0禁用它。
noExitBtn = 1：隐藏退出按钮。您可以在加载消息中指定此设置，而不是使用此URL参数。
注意：要在嵌入模式下隐藏所有按钮，请使用saveAndExit = 0＆noSaveBtn = 1＆noExitBtn = 1。
ready = message：指定要以嵌入或客户端模式发送的消息。默认为‘ready’。如果使用JSON协议，则将其忽略。
returnbounds = 1：以嵌入和客户端模式返回具有图范围的JSON结构。收到图XML后立即分派此消息。
proto = json：使用JSON在嵌入式和客户端模式下传递消息。
configure = 1：发送配置事件并等待配置操作

配置

如果configure=1使用 URL 参数，则客户端在创建主应用程序和发送事件之前发送{event: 'configure'}并等待。在配置中指定，例如。{action: 'configure', config: obj}

initobjconfig: {defaultFonts: ["Humor Sans"]}

JSON协议说明

客户端准备就绪后，它将发送{event：’init’ }并期望{action：’load’，xml：’…’}。指定可选的自动保存：在此消息中为1以启用自动保存功能。

您可以使用与上面定义的修改的URL参数相同的语义来设置可选的修改标志。可以使用与上面定义的saveAndExit URL参数相同的语义来指定可选的saveAndExit标志。URL参数优先于以这种方式设置的标志。指定可选的标题字符串以在菜单栏中（右侧）显示标题。

如果启用了自动保存，则编辑器将在{event：’autosave’…}中发送当前XML 。

显示加载消息中的XML，并返回一个{event：’load’…}，其中包含有关图表大小的一些数据。该消息中的XML可以是该图的任何受支持的XML表示形式，包括带有嵌入式XML的SVG和PNG文件。仍然可以使用旧的参数名称xmlpng。

或者，您可以在加载消息中添加一个描述符对象，以导入特定的数据格式，例如

{action：’load’，描述符： {format：’csv’，data：… }}其中data是CSV导入对话框中的字符串。
注意：对于XML，可以使用所有受支持的文件格式，包括PNG + XML，使用UTF8编码的SVG数据URI的数据部分，或使用base64编码的完整SVG或PNG数据URI。对于所有.vsd *文件，数据URI带有
data：application / vnd.visio;必须使用base64前缀。Lucidchart和Gliffy文件表示为JSON字符串。
当您选择保存，同样的消息作为负载发送事件，但有一个附加的事件： “保存” 和XML：“…”包含图表的XML。当您选择保存并退出，消息中包含一个额外的退出：真。如果选择Exit，则会发送一个{event：’exit’，修改为：boolean}。当您在编辑器界面中单击链接时，应用程序尝试打开具有给定目标（默认值为_blank）的链接，并发送一个{event：’openLink’，href：String，target：String}事件。
{action：’merge’，xml：’…’}可以随时发送，以将给定XML的内容合并到当前文件中，{event：’merge’，error：’…’， message：…}以及传入的消息，并返回可选错误。如果合并成功，则错误为null。
可以随时发送{action：’dialog’，标题：’…’，消息：’…’，按钮：’…’，修改：bool}，以在编辑器窗口中显示对话框。要翻译对话框，请改用titleKey，messageKey和buttonKey。
{action：’prompt’，title：’…’，ok：’…’，defaultValue：’…’} 可以随时发送，以在编辑器窗口中显示提示。要翻译标题，请改用titleKey和okKey。当行被选中，一个{事件：“提示”，值：“…”，留言：…}返回与传入的消息，在对话框中输入的值。当取消选择，一个{事件：“提示-取消”，消息：…}与传入的消息被返回。
可以随时发送{action：’template’}以显示模板对话框。通常发送该消息而不是加载消息以创建初始图。当创建被选中，图表从所选模板创建的。如果选择取消，则会发送退出消息。指定一个可选的callback：true参数，以将当前模板和文件名传递回调用方进行验证。回调的消息为{event：’template’，xml：’…’，blank：’…’，name：…，message：…}其中，如果存在空白图表，则blank为true在模板对话框和消息中选择的是传入消息。
{action：’layout’，layouts：…}使用与Arrange Layout Apply相同的格式来运行布局数组。
{action：’draft’，xml：’…’，name：’…’，editKey：’…’，throwkey：’…’，ignore：bool}可以发送以显示草稿对话。如果编辑或丢弃被选择，一个{事件：…“草稿”，错误/结果：：“…”，消息} 与传入消息和的结果‘编辑’或‘取消’被返回。如果显示对话框时出现错误，则返回错误而不是消息中的结果。如果ignore为true，则使用ignore选项，其返回结果：’ignore’。
可以随时发送{action：’status’，消息：’…’，修改为：bool}，以在状态栏中显示消息。可选的Modifyed 标志用于更新修改后的状态。可以使用messageKey代替消息来指定消息的资源密钥，而不是消息。
{action：’spinner’，message：’…’，show：bool，enabled：bool}可以随时发送以显示带有消息的微调器，或者如果show设置为false，则隐藏当前的微调器。可以使用messageKey 代替消息来指定消息的资源密钥，而不是消息。
{action：’export’，format：’…’}可以随时发送以返回{event：’export’，format：’…’，message：…，data：’… ‘，xml：’…’}，其中包含用于给定格式的传入消息，数据和XML。支持的格式包括html（以前的嵌入格式），html2（新的嵌入格式），svg（默认），xmlsvg（具有嵌入式XML的SVG），png和xmlpng（具有嵌入式XML的PNG）。导出事件中的data参数包含给定导出格式的有效数据URI。当前，使用的是base64编码，但将来可能会更改。
- 对于png和xmlpng，请使用附加的spin（或spinKey）参数来启用微调器，并在生成图像时指定一条消息（或messageKey）。
- 使用可选的xml 参数为所有受支持的格式指定要导出的图的XML。
- 对于svg和xmlsvg格式，请使用可选的embedImages：false来禁用SVG输出中的嵌入式图像。

如果收到任何未知消息，系统将以{错误：’unknownMessage’，数据：…}进行响应，其中data是传入消息的字符串表示形式。

支持的 URL 参数

在线版本的draw.io编辑器支持以下URL参数，其优先顺序如下：

设置

open=prefix+ID：如果位置哈希属性不可用，请使用它作为替代。浏览器会立即将 hash 属性添加到 URL 中，而不会删除 URL 参数。现有的哈希属性优先。
lang=xy：指定用户界面的语言。可能的值xy包括i18n、id：Bahasa Indonesia、ms：Bahasa Melayu、bs：Bosanski、ca：Català cs、：Čeština、da：Dansk、de：Deutsch、et：Eesti、en：English、es：Español、fil：Filipino、fr：Français、it：Italiano、hu：Magyar , nl: 荷兰, no: 挪威, pl: Polski, pt-br: 葡萄牙语（巴西）、pt: 葡萄牙语（葡萄牙）、ro: Română、fi: Suomi、sv: Svenska、vi: Tiếng Việt、tr: Türkçe、el: Ελληνικά、ru: Русский、sr: Српски、uk: Українська, he: עברйת,ar: 巴利埃, th: ไทย, ko: 한국어, ja: 日本语, zh: 中文（中国）, zh-tw: 中文（台湾）
libs=key1;key2;...;keyN：指定当前形状库。可能的键有 allied_telesis、android、archimate、archimate3、arrows2、atlassian、aws3、aws3d、aws4、azure、basic、bootstrap、bpmn、cabinet、cisco、cisco_safe、citrix、clipart、dfd、eip、electric、er、floorplan、流程图、gcp2、一般、gmdl、ibm、图像、信息图、 ios、lean_mapping、模型、mscae、网络、办公室、pid、机架、标志、站点地图、sysml、uml、veeam 和 webicons。
clibs=key1;key2;key;...;keyN：指定自定义库（键是带有 U 前缀的文件 ID 或 URL）
viewbox={"x": int, "y": int, "width": int, "height": int}：指定文件 ID 时设置初始视口。
page=index：从给定页面开始（默认为第一页，其中第一页的索引为0）
page-id=ID：以给定页面 ID 开头（优先于pageURL 参数）。要查找当前页面的 ID，请右键单击画布并选择“编辑数据”。 ID 是该对话框中的第一个条目。
hide-pages=1：隐藏允许您在灯箱模式下更改当前页面的控件。
ui=[kennedy|min|atlas|dark|sketch|simple]：使用默认（Kennedy）、Minimal、Atlas 或 Sketch编辑器主题，并可以设置深色模式或新的现代模式。
sketch=[0|1]：禁用/启用草图样式（草图主题默认为 1，所有其他主题默认为 0）。
dark=[0|1|auto]：在 Sketch、Minimal 和 Simple 编辑器主题中禁用/启用深色模式。
drafts=0：禁用草稿状态（不在IndexedDB中保存未保存的文件）。
splash=0：不显示启动画面。
plugins=0：不加载插件。
format=0：禁用右侧的格式面板。
picker=0/1：在对话框中禁用/启用 Google 文件选择器。
thumb=0：禁止在云端硬盘中创建缩略图。
chrome=0：使用 chromeless 只读查看器。
target=[auto|self|frame|blank]：在无镶边模式下在同一窗口或框架中或在空白窗口中打开链接（auto默认情况下，在无镶边模式下在同一窗口中打开相关链接和锚点，在编辑模式下在新窗口中打开所有链接）。
highlight=hex#：指定无边框模式下链接的突出显示颜色（无前导）。
rt=1：使用无铬模式并启用 Google Drive 实时功能。
edit=url：在无边框模式下添加“编辑”按钮的链接（edit=_blank用于将图表编辑为新副本）。
lightbox=1：在无边框模式下使用灯箱（更大的缩放、看不到页面、无边框）。
grid=1：将默认网格启用设置为 true。
nav=1：在无镶边模式下启用折叠。
layers=1：在chromeless模式下添加图层控制
layer-ids=id1 id2...：要显示的以空格分隔的图层 ID 列表。如果未指定，则显示所有层。
close=1：在无边框模式下显示“关闭”按钮，选择该按钮后将关闭窗口。
rev=id：选择 Google Drive 或 Dropbox 文件的特定版本。
pv=0：将默认设置pageVisible为false。
sb=0：以禁用滚动条的方式开始。
ruler=1：从启用标尺开始。
toolbar=0：在无边框模式下禁用工具栏。
border=60：设置灯箱模式下使用的边框宽度（默认为60）。
p=id1;id2;...;idN：选择要加载的插件。查看可用插件的列表。
base=url：设置用于链接的基本 URL（如果document.referrer在嵌入模式下不可用，则使用此选项）。
gitlab=url：设置自定义 GitLab 安装的 URL 编码路径以用于 GitLab 文件操作。
gitlab-id=ID：使用自定义 GitLab 实例时指定自定义 GitLab 应用程序的客户端 ID 。
vars=json：使用 URI 编码的 JSON 字符串作为全局占位符，以便在启用的标签和工具提示中使用，例如vars={"key":"value"}。
zoom=nocss：禁用 CSS 缩放预览。
override-mime=1：将所有 Google 云端硬盘文件另存为application/vnd.jgraph.mxfile.
template-filename=name：如果使用 #U 哈希属性但 URL 不包含文件名来确定二进制模式。请参阅支持的位置哈希属性列表。
math-output=html：设置数学排版输出为HTML-CSS。
nowarn=1：在卸载本地文件之前抑制警告。
svg-warning=0：在 SVG 导出中禁止对老查看者发出警告。
search-shapes=value：从搜索形状框中的给定值开始。
模式
local=1：仅使用设备模式。
sync=[none|manual|auto]：启用/禁用协作编辑（默认为auto）。
save=local/remote：启用/禁用本地保存文件（默认为local）。如果禁用此功能，则文件将通过 servlet 回显以进行本地保存。
storage=device：为触摸设备添加设备存储选项。
math=0：禁用 MathJax 支持。
browser=0/1：禁用本地存储作为存储位置 ( 0) 或在存储对话框中显示浏览器选项 ( 1)。
gapi=0：禁用 Google 集成。
db=0：禁用 Dropbox 集成。
od=0：禁用 OneDrive 集成。
tr=0：禁用 Trello 集成。
gh=0：禁用 GitHub 集成。
gl=0：禁用 GitLab 集成。
drive=0：模拟app.diagrams.net，无论域名如何（使用旧的应用程序 ID）。
mode=[google|onedrive|github|dropobox|device|browser]：切换到指定模式。
offline=[1|0]：注册或取消注册渐进式 Web 应用程序（所有远程存储位置均被禁用）。
pwa=0：禁用注册（取消）注册渐进式 Web 应用程序的功能（安装后它将保持安装状态）。
stealth=1：禁用所有需要外部 Web 服务的功能（例如PDF 导出）。
demo=1：的快捷方式db=0&gapi=0&math=0&picker=0，禁用启动屏幕并创建一个空的本地图表文件。
url=url：已弃用- 使用 U 哈希属性#U{uri_encoded_url}从 URI 编码的 URL 打开图表，例如。 https://app.diagrams.net/#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fmaster%2Fdiagrams%2Fschema.xml
client=1：以客户端模式运行diagrams.net。这会显示正常的 UI，并ready在页面加载时向打开者或父级发送消息。收到包含 XML 或压缩 XML 的消息后，将创建本地文件。然后将该文件设置为modified，以便在发送初始 XML 后可以关闭与窗口的连接。页面刷新后是否再次加载 XML 取决于调用者的实现。用于proto=json在特殊情况下使用自定义协议。
desc={compressed-json}：传递 CSV 导入描述符（示例）。仅适用于www.draw.io域。
embed=1:在嵌入模式下运行diagrams.net 。仅将此模式与embed.diagrams.net结合使用。
configure=1：发送configure事件并等待操作configure。查看有关嵌入模式的更多信息。
create=url/name/json：从模板 URL 创建新文件。如果该值不是 URL 并且不为空，则脚本将尝试使用window.opener[url].在嵌入模式下，window.opener[name]将用于获取初始 XML。请注意，这需要在 opener/parent 中使用相同的源策略来读取变量。如果值以 a 开头{，则将其视为 JSON 对象。当前支持的对象是{type: 'mermaid', data: 'data'}数据是转换为 draw.io 图的 Mermaid 图定义的对象（示例）。
title=title：设置新文件标题（与create和url参数一起使用）。
notitle=1：使用新文件的默认文件名（与url参数一起使用）