Blazor使用TXTextControl控件编辑报告

1 环境

Blazor Server .Net 8 TextControl32

2 课程链接

https://www.textcontrol.com/products/asp-dotnet/tx-text-control-dotnet-server/getting-started/?type=getting-started&technology=aspnet-core&component=document-editor

3 学习使用（加载TextControl控件）

3.1 Document Editor

https://www.textcontrol.com/blog/2024/01/25/using-tx-text-control-in-an-blazor-server-app-with-net-8/
Blazor和TextControl通过JS进行互操作

文档的首次加载总是失败，跟JS加载的顺序有一定的关系，在JS交互文件中进行处理

export async function addEditorToElement(dotNetRef, options) {
   
   
	dotNetObject = dotNetRef;
    //typeof 有特殊的安全防范机制，针对未定义的变量返回undefined
	if (typeof TXTextControl === 'undefined') {
   
   
		console.log("TXTextControl is not defined");
		setTimeout(function () {
   
   
			location.reload();
		}, 30);
	} else {
   
   
		TXTextControl.init({
   
   
			containerID: "txDocumentEditorContainer",
			webSocketURL: options.websocketurl
		});
	}

	//TXTextControl.init({
   
   
	//	containerID: "txDocumentEditorContainer",
	//	webSocketURL: options.websocketurl
	//});
	//延时加载
	//setTimeout(function () {
   
   
	//  TXTextControl.init({
   
   
	//    containerID: "txDocumentEditorContainer",
	//    webSocketURL: options.websocketurl
	//  });
	//}, 500);

}

3.2 Document Viewer

https://www.textcontrol.com/blog/2024/01/29/using-the-document-viewer-in-a-blazor-server-app-with-net-8/

功能少于Document Editor，可酌情使用。

4 javascript Api列表

https://docs.textcontrol.com/textcontrol/asp-dotnet/ref.javascript.api.htm
注意：有时API的使用会失效，需要给出一定的延时；文档中给出的可选参数有时是必须的，否则API调用无效且不会报错；当前链接提供的属性、方法等未必是全部；

5 加载文档（TextControl加载文档，JS互操作）

//TextControl加载文档，第一个参数：文件类型，第二参数：base64字符串
TXTextControl.loadDocument(TXTextControl.StreamType.WordprocessingML, document);
//Razor组件，可由js调用的方法
[JSInvokable("LoadDocumentFromFile")]
public void LoadDocumentFromFile(string filename)
{
   
   
  // check if the file exists
  if (!System.IO.File.Exists(filename))
  {
   
   
    return;
  }

  // load the file into a byte array
  byte[] bDocument = System.IO.File.ReadAllBytes(filename);

  // invoke the JS function 'loadDocument' to load back to the modified document
  //_txtextcontrol?.InvokeVoidAsync("loadDocument2", new object[] { Convert.ToBase64String(bDocument), filename });
  _txtextcontrol?.InvokeVoidAsync("loadDocument2", Convert.ToBase64String(bDocument));
}
//组件引用界面
_txtextcontrol?.LoadDocumentFromFile("F:/Testspace/20241104/TextControlFirst/wwwroot/demo/test.docx");

6 开启修改跟踪（word中的修订）

TXTextControl.isTrackChangesEnabled = true;

7 文档修改保存

注意：若文档过大，可使用ajax将TextControl保存结果存储为文件

//TextControl组件
/// 

/// 文件保存
/// 
/// 
public async Task Save()
{
   
   
  await _txtextcontrol.InvokeVoidAsync("Save");
}

/// 

/// 将TextControl保存的结果存储为相关文件
/// 
/// 
[JSInvokable]
public void SaveDocument2File(string document)
{
   
   
  byte[] bContent;
  using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
  {
   
   
    tx.Create();
    tx.Load(Convert.FromBase64String(document), TXTextControl.BinaryStreamType.WordprocessingML);

    // save back
    tx.Save(out bContent, TXTextControl.BinaryStreamType.WordprocessingML);
  }
  string bPath = $"F:/Testspace/20241104/TextControlFirst/wwwroot/demo/test1.docx";
  using (FileStream fs = new FileStream(bPath, FileMode.OpenOrCreate))
  {
   
   
    BinaryWriter binWriter = new BinaryWriter(fs);

    binWriter