@bud-fe/file-sdk

bud-fe-file-sdk

文件处理、渲染、编辑工具包，编辑器基于 CKEditor5 做自定义构建，在编辑器的工具栏里扩展了一些如：pdf 下载、占位符、word 导入等插件; 支持对 docx 文件的预览和编辑，支持 html 转 PDF 的下载。

安装与使用

pnpm add @bud-fe/file-sdk

import ABIFileSDK from '@bud-fe/file-sdk';

API 接口

createEditor: 创建一个 editor 实例

export interface IEditorConfig {
  placeholderConfig?: { type: 'select'; options: string[] } | { type: 'input' };
  outSource?: 'markdown' | 'html';
  width: number;
  height: number;
  hideToolbarItems: ToolBarItem[]
}

// 创建 editor 实例
ABIFileSdk.createEditor('#editor', {
      placeholderConfig: { type: 'select', options: ['value1', 'value2']}, // 不传 placeholderConfig 配置时默认以 input 形式
      hideToolbarItems: ['exportToPDF', 'importFromWord'], // 需要隐藏的工具栏插件
      height: 800
    })
      .then((value) => {
        // value 为 editor instance, 在 react 里可以定义一个 ref 进行赋值
        editor.current = value;
      })
      .catch((error) => {
        console.error(error);
      });
···
// 设置/获取数据
editor.current.getData() // 默认输出的是 html 格式
editor.current.setData() // 设置数据
editor.current.getInsertPlaceholders() // 获取所有插入的占位符数据

国际化

编辑器默认英文，如果需要其他语言转换，则需要导入对应的 translation

import '@bud-fe/file-sdk/dist/translations/zh-cn.js';

编辑器集成了一些特色功能，如果有更多需求，也可以扩展更多的插件进行支持

• 可以通过导入 word 插件将 DOCX 文档转换成 HTML 并且在 editor 里编辑
• 支持将 html 导出为 pdf
• 支持占位符变量替换
• 支持查找替换功能
• 可以通过 Source 直接转换成 html 源码编辑
• ...

Screenshot

docxPreview: 基于 docx-preview 接收一个 docx 文件并转成 html 进行预览

export interface Options {
  inWrapper: boolean; // 是否给文档添加背景样式
  className: string; // 预览文档的样式类名
  headerTextCallback: (header: string) => void; // 获取页眉
  footerTextCallback: (footer: string) => void; // 获取页脚
  ... // 兼容 docx-preview 支持的参数配置
}

ABIFileSdk.docxPreview(file, '#preview');
ABIFileSdk.docxPreview(file, '#preview', { className: 'preview', inWrapper: true });

htmlToPdf: 基于 html2pdf 的 pdf 下载功能，优化了原有的 pdf 格式

const html = '...' // 获取一段 html 字符串
ABIFileSdk.htmlToPdf(html, 'abi-file') //导出名为 abi-file 的 pdf 文件
ABIFileSdk.htmlToPdf(html, 'abi-file', {
    margin: [5, 0, 5, 0],
    ...
})

config 配置可参考

Name	Type	Default	Description
margin	number or array	0	PDF 页面间距 (in jsPDF units). 格式为 number 或, [vMargin, hMargin], 或 [top, left, bottom, right].
filename	string	'file.pdf'	导出的 PDF 文件名
pagebreak	object	{mode: ['css', 'legacy']}	控制页面的分页行为. 更多细节可参考 Page-breaks
image	object	{type: 'jpeg', quality: 0.95}	设置生成 PDF 的图片类型和质量，更多细节可参考 Image type and quality
enableLinks	boolean	true	如果启用，PDF 超链接会自动添加到所有锚标记之上
html2canvas	object	{ }	html2canvas (配置 ).
jsPDF	object	{ }	jsPDF (配置).

htmlPreview: 渲染一段 html 进行预览

const html = '...'; // 获取一段 html 字符串
ABIFileSdk.htmlPreview('#preview', html);

License

Licensed under the MIT License.