文件处理、渲染、编辑工具包,编辑器基于 CKEditor5 做自定义构建,在编辑器的工具栏里扩展了一些如:pdf 下载、占位符、word 导入等插件; 支持对 docx 文件的预览和编辑,支持 html 转 PDF 的下载。
pnpm add wind-file-sdk
import FileSdk from 'wind-file-sdk';
export interface IEditorConfig { placeholderConfig?: { type: 'select'; options: string[] } | { type: 'input' }; outSource?: 'markdown' | 'html'; width: number; height: number; hideToolbarItems: ToolBarItem[] } // 创建 editor 实例 FileSdk.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() // 获取所有插入的占位符数据
编辑器集成了一些特色功能,如果有更多需求,也可以扩展更多的插件进行支持
- 可以通过导入 word 插件将 DOCX 文档转换成 HTML 并且在 editor 里编辑
- 支持将 html 导出为 pdf
- 支持占位符变量替换
- 支持查找替换功能
- 可以通过 Source 直接转换成 html 源码编辑
- ...
export interface Options { inWrapper: boolean; // 是否给文档添加背景样式 className: string; // 预览文档的样式类名 } FileSdk.docxPreview(file, '#preview'); FileSdk.docxPreview(file, '#preview', { className: 'preview', inWrapper: true });
const html = '...' // 获取一段 html 字符串 FileSdk.htmlToPdf(html, 'abi-file') //导出名为 abi-file 的 pdf 文件 FileSdk.htmlToPdf(html, 'abi-file', { margin: [5, 0, 5, 0], ... })
| 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 (配置).
|
const html = '...'; // 获取一段 html 字符串 FileSdk.htmlPreview('#preview', html);
Licensed under the MIT License.