docx-preview.js与.netCore后端实现预览Word文档

63 阅读 0 评论 42 点赞

我是靠谱客的博主伶俐蜜蜂，最近开发中收集的这篇文章主要介绍docx-preview.js与.netCore后端实现预览Word文档，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

有需求.net core项目中使用docx-preview.js预览Word文档，网上很多资料，主要是Vue如何使用docx-preview预览Word文档，很少HTML网页中使用，一般网页都是预览后端的某文件，网上配合后端的资料很少，搜到的也用不成，我掉了一些头发弄了出来，记录一下，希望对其他人也有帮助。

这个插件只支持docx文件，doc文件我写了转换，使用Aspose.word转换一下。

需要下载：jszip.min.js和docx-preview.js库,直接从官网Demo页面，打开开发者工具另存为到我的电脑就行了。

官网Demo:https://volodymyrbaydalka.github.io/docxjs/

需要代码的去下载：https://download.csdn.net/download/u011964241/87020693

前端HTML网页代码如下：

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="~/js/jszip.min.js"></script>
<script src="~/js/docx-preview.js"></script>
</head>
<body >
<div>
<button onclick="loadocx()">点击预览docx文件</button>
<button onclick="loaddoc()">点击预览doc文件</button>
</div>
<div>
<div id="document-container" ></div>
</div>
<script>
var ajax = function (option) {
var xhr = new XMLHttpRequest();
xhr.open(option.type, option.url, option.async);
xhr.responseType = option.dataType;
xhr.onload = function (e) {
if (this.status == 200) {
option.success(this);
}
};
xhr.onerror = function (ex) {
option.error(ex);
}
xhr.send();
}
var $ = { ajax: ajax };
function loadocx() {
$.ajax({
type: 'get',
url: '@Url.Content("~/Home/FileBlob")',
async: true,
dataType: 'arraybuffer',
success: function (data) {
data = data.response;
var container = document.querySelector("#document-container");
docx.renderAsync(data, container, null, docx.defaultOptions);
},
error: function (ex) {
alert('error');
}
});
}
function loaddoc() {
$.ajax({
type: 'get',
url: '@Url.Content("~/Home/FileDocBlob")',
async: true,
dataType: 'arraybuffer',
success: function (data) {
data = data.response;
var container = document.querySelector("#document-container");
docx.renderAsync(data, container, null, docx.defaultOptions);
},
error: function (ex) {
alert('error');
}
});
}
</script>
</body>
</html>

后端关键代码：

先在nuget中安装aspose.word,skiasharp.

 [HttpGet]
public IActionResult FileBlob()
{
var file = @"D:UsersitliuDesktop隧洞接口.docx";
//将文件转换为二进制返回前端
FileStream fs = new FileStream(file, FileMode.Open);
byte[] bs = new byte[fs.Length];
fs.Read(bs, 0, (int)fs.Length);
fs.Close();
FileContentResult result = new FileContentResult(bs, "application/octet-stream");
return result;
}
[HttpGet]
public IActionResult FileDocBlob()
{
var file = @"D:UsersitliuDesktop收入证明.doc";
var outputfile = @"D:UsersitliuDesktop收入证明.docx";
//前端不支持doc文件，将doc文件转成docx文件
var doc = new Aspose.Words.Document(file);
doc.Save(outputfile, Aspose.Words.SaveFormat.Docx);
//将文件转换为二进制返回前端
FileStream fs = new FileStream(outputfile, FileMode.Open);
byte[] bs = new byte[fs.Length];
fs.Read(bs, 0, (int)fs.Length);
fs.Close();
FileContentResult result = new FileContentResult(bs, "application/octet-stream");
System.IO.File.Delete(outputfile);//删除生成的文件
return result;
}