Untiy WebGL 修改Word模板(生成实验报告)

一、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(/&lt;/g, '<')

            .replace(/&gt;/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(/&lt;/g, '<')
										.replace(/&gt;/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文件,注释就行 (咱也不懂,注释了发现没问题就可以了)

八、结语

俺只是一个无情的搬运工,还得向大佬好好学习,若有大佬知其原理请与俺分享,第一次写博客,若有写不清晰之处还请见谅

转载请说明出处内容投诉
CSS教程_站长资源网 » Untiy WebGL 修改Word模板(生成实验报告)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买