一、Unity WebGL 截图功能
附上参考连接：Unity开发WebGL杂记——实现截屏功能_unity中webgl录屏-CSDN博客
我的源码为：
public RawImage rawImage;
[Header("存取截图数据")]
public Texture2D screenShot;
public void CallCoroutine()
{
StartCoroutine(ScrrenCapture(new Rect(0, 0, Screen.width, Screen.height)));
Debug.Log(screenShot.width + " " + screenShot.height +"图片长宽");
rawImage.texture = screenShot;
}
IEnumerator ScrrenCapture(Rect rect)
{
screenShot = new Texture2D((int)rect.width, (int)rect.height, TextureFormat.RGB24, false);
yield return new WaitForEndOfFrame();
screenShot.ReadPixels(rect, 0, 0);
screenShot.Apply();
}二、设置Word 模板
参考链接：Unity WebGL 下载替换Word模板数据_unity webgl生成world-CSDN博客
可下载此链接的工程文件进行更改，我就是使用的此链接工程文件进行更改，此链接为更改文本，下面讲一下如何插入图片
注意：图片必须使用%
三、将数据传入前端
[Header("图片数据")]
public byte[] imageData;
#region 初始化
LabReprotData reprotData = new LabReprotData();
reprotData.eid = "1234567890";
reprotData.name = "子讳";
reprotData.scroe = "88";
reprotData.imageData = ConvertTextureToBytes(jieTu.screenShot);
/// <summary>
/// 将 Texture2D 转换为字节数组
/// </summary>
/// <param name="texture"></param>
/// <returns></returns>
private byte[] ConvertTextureToBytes(Texture2D texture)
{
byte[] bytes = texture.EncodeToPNG();
return bytes;
}四、设置前端功能
以下代码加入<head>中
<!--下载Word的插件-->
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/docxtemplater.js"></script>
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/pizzip.js"></script>
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/FileSaver.js"></script>
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/pizzip-utils.js"></script>
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/imagemodule.js"></script>我的理解是类似于C#de using、后续添加的module模块可放置StreamingAssets/WebGLDownloadWordJS/js/文件夹下
以下代码加入 <script>中
//添加功能---------------------------------------------------------------------------------------
function HtmlDownloadWord(bytes, reportdata) {
var blob = new Blob([bytes]);
var url = window.URL.createObjectURL(blob);
generate(url, reportdata);
}
function loadFile(url, callback) {
PizZipUtils.getBinaryContent(url, callback);
}
//处理base64数据
const base64Regex =
/^data:image\/(png|jpg|svg|svg\+xml);base64,/;
const validBase64 =
/^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
function base64Parser(dataURL) {
if (
typeof dataURL !== "string" ||
!base64Regex.test(dataURL)
) {
return false;
}
const stringBase64 = dataURL.replace(base64Regex, "");
if (!validBase64.test(stringBase64)) {
throw new Error(
"Error parsing base64 data, your data contains invalid characters"
);
}
// For nodejs, return a Buffer
if (typeof Buffer !== "undefined" && Buffer.from) {
return Buffer.from(stringBase64, "base64");
}
// For browsers, return a string (of binary content) :
const binaryString = window.atob(stringBase64);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
const ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}
return bytes.buffer;
}
const imageOptions = {
getImage(tag) {
return base64Parser(tag);
},
getSize() {
console.log("大小已被调用");
return [100, 100];
},
};
function generate(url, reportdata) {
loadFile(
url,
function (error, content) {
if (error) {
throw error;
}
//先处理unity传入的数据得到base64
reportdata = (reportdata.replace(/<(.|\n)*?>/g, '') || ' ')
.replace(/</g, '<')
.replace(/>/g, '>');
reportdata = JSON.parse(reportdata)
var imageBytes = reportdata.imageData; // 图片字节数组数据
// 将图片数据转换为 base64 格式
var imageBase64 = btoa(String.fromCharCode.apply(null, imageBytes));
imageBase64 = "data:image/png;base64," + imageBase64;
console.log(imageBase64);
var imageModule = new ImageModule(imageOptions);
var zip = new PizZip(content);
var doc = new window.docxtemplater(zip, {
paragraphLoop: true,
linebreaks: true,
modules: [imageModule]
});
//const image = doc.Media.addImage(doc, imageBytes, 230, 230);
doc.***pile();
const data = {
eid: reportdata.eid,
name: reportdata.name,
scroe: reportdata.scroe,
image: imageBase64,
}
//渲染模板
doc.render(data);
var out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
***pression: "DEFLATE",
});
saveAs(out, "实验报告.docx");
});
}五、添加docxtemplater-image-module-free模块
链接1：GitHub - Liang-F/docxtemplater-image-module-free：docxtemplater 的开源图像模块
链接2：GitHub - open-xml-templating/docxtemplater：从模板（Word、Powerpoint 和 Excel 文档）、Node.js、浏览器和命令行生成 docx、pptx 和 xlsx / 演示：https://www.docxtemplater.***/demo。#docx #office #generator #templating #report #json #generate #generation #template #create #pptx #docx #xlsx #react #vuejs #angularjs #browser #typescript #image #html #table #chart
此处附上两个链接用于下载模块,放置StreamingAssets/WebGLDownloadWordJS/js/文件夹下
六、演示视频
视频管理-CSDN创作中心
七、开发中遇到的Bug
1、第一个bug没有记录，是按照二中链接进行的时候网页端打不开。解决办法，进行到第五部后不往下进行，而是将下图中index.html的图片所示部分插入至打包后的index.html文件中
插入部分1
<!--下载Word的插件-->
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/docxtemplater.js"></script>
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/pizzip.js"></script>
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/FileSaver.js"></script>
<script type="text/javascript" src="StreamingAssets/WebGLDownloadWordJS/js/pizzip-utils.js"></script>插入部分2
function HtmlDownloadWord(bytes,reportdata)
{
var blob = new Blob([bytes]);
var url = window.URL.createObjectURL(blob);
generate(url,reportdata);
}
function loadFile(url, callback)
{
PizZipUtils.getBinaryContent(url, callback);
}
function generate(url,reportdata)
{
loadFile(
url,
function (error, content)
{
if (error) {
throw error;
}
var zip = new PizZip(content);
var doc = new window.docxtemplater(zip, {
paragraphLoop: true,
linebreaks: true,
});
reportdata = (reportdata.replace(/<(.|\n)*?>/g, '') || ' ')
.replace(/</g, '<')
.replace(/>/g, '>');
reportdata = JSON.parse(reportdata)
// Render the document (Replace {first_name} by John, {last_name} by Doe, ...)
doc.render(reportdata);
var out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
// ***pression: DEFLATE adds a ***pression step.
// For a 50MB output document, expect 500ms additional CPU time
***pression: "DEFLATE",
});
// Output the document using Data-URI
saveAs(out, "实验报告.docx");
}
);
}插入完成后打开即可正常替换word中文本，在次感谢下此链接作者
2、若模板word设置为
则生成的文档为
务必按照以下方式设置word模板
3、设置word模板应该换行，在一个大佬链接下看到的应该换行，链接找不到了（抱歉哈大佬）、 若按照以下方式设置，报错信息为，
4、报错信息如下
解决办法：在此StreamingAssets/WebGLDownloadWordJS/js/ 文件夹下打开 imagemodule.js文件，注释就行 （咱也不懂，注释了发现没问题就可以了）
八、结语
俺只是一个无情的搬运工，还得向大佬好好学习，若有大佬知其原理请与俺分享，第一次写博客，若有写不清晰之处还请见谅
