导出

文件

import { downloadBlob } from '@tiptap-pro/extension-diagrams/export'

const { blob, svg, width, height, alt } = await editor.storage.diagrams.export(
  { pos },
  { format: 'png', scale: 2, background: '#ffffff' },
)
downloadBlob(blob, 'chart.png')

导出内容

第一个参数 target 是以下之一：

通过其图表渲染器绘制图表。 renderer 和 size 选项不适用于图表。图表的颜色来自 --tt-flow-diagram-* 自定义属性。

选项

返回的内容

• SVG 具有具体颜色，而不是 var(…)，因此它在页面外部看起来相同。
• 绘制像素的渲染器，例如在画布上绘制的渲染器，也可以导出。它的 SVG 保存的是图像而不是形状，因此它不会在无损失的情况下进行缩放。请参阅您自己的渲染器。
• PNG、WebP 和 JPEG 文件需要浏览器。
• **ECharts和D3图表的SVG可以在服务器上制作。

@tiptap-pro/extension-diagrams/export 还具有 svgToBlob、svgToImage、toDataUrl、readSvgSize、inlineSvgStyles 和 rasterToSvg。

字

将图表放入 Word 文档中的方法有以下三种：

原生 Word 图表是Word 自己绘制的图表。您可以在 Word 中重新设置其样式，然后“编辑数据”会在 Excel 中打开其数据。

仅图表和流程图

exportDocx 写入仅包含图表和流程图的新 Word 文件：

const { blob, notes } = await editor.storage.diagrams.exportDocx({
  targets: [{ pos }],
  title: 'Report',
})
downloadBlob(blob, 'charts.docx')
for (const note of notes) console.info(note.title ?? 'All charts', note.message)

文件保存的内容

• 每个目标 按顺序成为原生 Word 图表，其数据位于嵌入式工作簿、Word 表格或图像中，如下所述。
• 图表 变成 PNG 图像，缩放到页面宽度，其标题作为说明文字。
• 如果没有 targets，该文件将按文档顺序保存每个包含数据且未隐藏在其表格后面的图表以及每个包含源的图表。
• 当没有什么可写的，或者什么都不能写时，promise 会被拒绝。
• 带有 caption 的图表后面是 Word 标题样式的描述。
• 每个图表和图像都有其标题和描述作为替代文本。
• matrix 成为带有阴影单元格的 Word 表格。
• 系列颜色和字体来自页面。请参阅样式。

图表作为图像

images 决定图表何时变为 PNG 图像而不是原生 Word 图表：

使用 'auto'，当字图表显示不同内容时，图表也会变成图像：

• 是 x 轴上有数字的散点图，因为 Word 会均匀地间隔 x 值，
• 是带有参考线的图表，因为 Word 图表没有参考线。

当无法绘制图像时，例如因为没有渲染器可以绘制图表，则类型为 Word 形式的图表将变为 Word 图表，并带有注释。任何其他类型的图表都会被省略，并附有注释。

注释

notes 列出了 Word 与编辑器显示的内容不同的内容，每个句子。该扩展程序从图表的数据和图表规格中提取注释，因此您无需打开文件即可获取它们。注释有 pos、title 和 message。注释涵盖：

• Word 缺少的字体 (pos: null)、
• 具有多个系列的饼图或圆环图，Word 仅显示第一个系列、
• x 轴的范围，Word 忽略该范围，
• 不是十六进制值的背景、系列或轴颜色，
• 仅在某些类别上的网格线或标签，Word 将其放置在每个类别中，
• 省略类别轴线的值网格线，
• 面积图的边缘系列样式，Word 以自己的线条样式绘制，
• 仅选择一个渲染器理解，
• 链接图表在 Word 中保存其数据的快照，
• matrix，这是一个 Word 表格，
• 一个以图像形式编写的图表，以及为什么当其类型具有 Word 形式时，
• 一个图表被遗漏，或者写为 Word 图表，因为无法绘制图像。
• 一个图表，它是 Word 中的图像，或者因为无法绘制而被遗漏。

不导出

@tiptap-pro/extension-diagrams/core 中的这些函数可以告诉您 Word 获得的内容，而无需写入文件：

整个文档

不知道 chart 和 flowDiagram 节点的转换器把他们排除在外。 @tiptap-pro/extension-diagrams/core 的 toPortableContent 返回文档的副本，其中图表和流程图由每个转换器都知道的节点组成，例如表格、图像和段落。改为导出该副本。

此示例使用 @tiptap-pro/extension-export-docx 导出副本，将其发送到 Tiptap 的转换服务：

import { Editor } from '@tiptap/core'
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { toPortableContent } from '@tiptap-pro/extension-diagrams/core'
import { ExportDocx } from '@tiptap-pro/extension-export-docx'

const file = await new Promise((resolve, reject) => {
  const exporter = new Editor({
    element: null,
    content: toPortableContent(editor.getJSON()),
    extensions: [
      ConvertKit,
      ExportDocx.configure({ token: 'CONVERT_TOKEN', onCompleteExport: resolve, onError: reject }),
    ],
  })
  exporter.commands.exportDocx()
})

toPortableContent 不需要浏览器，因此它也在服务器上运行。 CONVERT_TOKEN 是您的 Convert API 令牌。请参阅 export-docx 文档了解其选项。

副本包含什么内容

仅当您的应用使用 uploadImage 上传图表时，图表才会包含图像，这会设置 previewUrl。如果没有它，副本会将图表的数据保存为表格。

matrix 单元格的颜色是其 background 属性，其文本颜色是 textStyle 标记。读取它们的转换器会保留颜色。

选项

'paragraphs' 将图表源保留在转换器中，省略代码块。选择 'codeBlock' 作为写入它们的转换器，例如 Markdown 或 HTML。

原生 Word 图表

使用 charts: 'native'，Word 绘制的图表类型本身会变成标记线，而不是图像和表格。这些类型包括条形图、折线图、面积图、散点图、饼图、圆环图、雷达图和组合图。任何转换器都可以写入 Word 文件。之后，addNativeCharts 将每个标记替换为原生 Word 图表。

import { Editor } from '@tiptap/core'
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { addNativeCharts, toPortableContent } from '@tiptap-pro/extension-diagrams/core'
import { ExportDocx } from '@tiptap-pro/extension-export-docx'

const doc = editor.getJSON()
const exported = await new Promise((resolve, reject) => {
  const exporter = new Editor({
    element: null,
    content: toPortableContent(doc, { charts: 'native' }),
    extensions: [
      ConvertKit,
      ExportDocx.configure({
        token: 'CONVERT_TOKEN',
        exportType: 'buffer',
        onCompleteExport: resolve,
        onError: reject,
      }),
    ],
  })
  exporter.commands.exportDocx()
})
const docx = addNativeCharts({ docx: exported, doc })

• 其他类型的写法与 'both' 相同。
• **将您传递给 toPortableContent 的同一文档传递给 addNativeCharts。它以相同的顺序查找图表。
• addNativeCharts 还采用 theme 和 fallbackFont。 theme 设置图表的颜色和字体，默认为 defaultChartTheme。 fallbackFont 是 Word 在缺少主题字体时使用的字体，默认为 'Arial'，至于 exportDocx。
• 转换器分割或更改的标记 保留为文本。

命令

ConvertChartToImage

用图表的图像替换图表。该图像是由 imageNodeName 选项命名的类型的节点。

editor.commands.convertChartToImage({ format: 'svg', keepData: true })

• 上传图像：通过 uploadImage 上传；未提供时，将图像嵌入为数据 URL。
• 一旦图像准备好，图表就会被替换，除非图表同时发生变化。
• 图像以两倍大小导出，因此在高密度屏幕上保持清晰。
• 当图像节点具有 width 属性时，如 @tiptap/extension-image 一样，该命令将其设置为图表的宽度，并且图像以该尺寸显示。

提供图像 max-width: 100%，以便它们在窄屏幕上缩小：

.tiptap img {
  max-width: 100%;
  height: auto;
}

ConvertImageToChart

将使用 keepData 制作的图像转回到图表中。

editor.commands.convertImageToChart()

redrawChartImage

使用当前样式、渲染器和配色方案，从其保留的图表中再次绘制使用 keepData 制作的图像。

editor.commands.redrawChartImage({ pos })

• 图像保留其其他属性及其保留的图表。
• 一旦新文件准备好，仅其文件、文本和宽度发生变化，除非图像同时发生变化。

对于不保留图表且没有渲染器绘制其类型的图像，返回 false。