HTML代码转word!亲测!可用!!!

1 篇文章 0 订阅

现在项目中遇到一个需求,就是一个富文本编辑区中,有echars表格。用户点击保存按钮,需要导出为word文档。

 

因为现在接手的项目,是基于上一个项目的框架。两个项目功能点差不多。但是在导出word这块,是后台java做的。也就是用的POI。前端传递参数至后台,后台将word模板中的${XXX}给替换掉。

但是这有一个问题,就是新项目中,word排版改了,跟之前的不一样。你以为改改word模板的${xxx}的不就行了?可惜,后台java还牵扯到java在解析时的一些代码,总之一句话,改动成本很高!

怎么办!怎么办!怎么办!

由于本人java和WEB都会写。本能的想到html转word。这多简单,html啥样,转成word不就好了?

说干就干!

于是用了N多方法,看了网上的一些误导别人的帖子,用什么FileSaver.js和jquery.wordexport.js!

我相信当有人看到我这篇帖子的时候,对上面这两个JS肯定有所了解了。

但是!!!导出word,如果HTML中是纯文字还行,一旦牵扯到图片,甭管你怎么转,如果只用上面两个JS ,你指定弄不出来,即便弄出来了,图片也是个路径,把word文件发送给另一台电脑上,根本显示不出图片!!

怎么办!!!!

花费了差不多3天吧,终于解决了

需要引入4个文件

1.jquery.js
2.fs.js
3.jw.js
4.hd.js

这4个文件必须引入,而且顺序不能错!!!

下面是代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="common/jquery-1.7.2.js"></script>
    <!--引入echarts-->
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script>
    <script src="common/fs.js"></script>
    <script src="common/jw.js"></script>
    <script src="common/hd.js"></script>


</head>
<body id="count">
<p>word测试</p>
<!--<div style="width: 500px;height: 500px;display: none" id="demo">-->
<!--</div>-->
<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>
<img src="base64code" id="myimg" alt=""  style="width:200px;height:200px;display: block">

<button id="btn">click</button>

<script type="text/javascript">

    $("#btn").click(function () {
        //获取要下载成word的代码块中的html代码
        var content=$("body").html();
        //调用以下函数即可,{orientation:'landscape'}是声明下载出来的word排版为横版,
        var converted = htmlDocx.asBlob(content,{orientation:'landscape'});
        //下载成word》
        saveAs(converted, 'test.docx');

    });

</script>
</body>
</html>

傻瓜式代码,自己把base64code替换成有效地base64代码即可。太长了就不输入了

亲测可用!兼容性还不错,IE9以上至少没问题

疲惫啊!!下面提供上面三个JS的下载地址。莫要当伸手党。小小的支援下,感激不尽。

https://download.csdn.net/download/qq_34113541/11945949

前人种树后人乘凉

  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
### 回答1: 我可以给你提供一个开源的 .NET 库来将 Word 文档换为 PDF 格式:Spire.Doc。 你可以使用下面的代码Word 文档换为 PDF: ``` using (var doc = new Document(fileName)) { doc.SaveToFile("output.pdf", FileFormat.PDF); } ``` 更多使用方法请参考官方文档:https://www.e-iceblue.com/Tutorials/Spire.Doc/Spire.Doc-Program-Guide/Convert-Word-to-PDF.html 希望这能帮到你! ### 回答2: .NET开源的WordPDF代码可以使用Aspose.Words for .NET。Aspose.Words是一个功能强大的.NET库,可以帮助开发人员在应用程序中轻松地将Word文档换为PDF格式。 使用Aspose.Words for .NET,我们可以按照以下步骤将Word文档换为PDF格式。首先,我们需要创建一个Aspose.Words的Document对象,通过加载Word文档文件来实现。然后,我们可以通过调用Document对象的Save方法来将文档保存为PDF文件。 以下是一个示例代码片段,展示了如何使用Aspose.Words for .NET将Word文档换为PDF格式: ``` using Aspose.Words; // 加载Word文档 Document doc = new Document("input.docx"); // 将文档保存为PDF格式 doc.Save("output.pdf", SaveFormat.Pdf); ``` 上述代码示例假设我们要将名为"input.docx"的Word文档换为名为"output.pdf"的PDF文件。使用Save方法的第二个参数SaveFormat.Pdf指定了保存为PDF格式。 需要注意的是,使用Aspose.Words for .NET进行WordPDF操作需要安装Aspose.Words for .NET库并将其引用到项目中。可以到Aspose的官方网站上下载Aspose.Words for .NET,并按照官方文档进行安装和配置。 总之,通过使用Aspose.Words for .NET,我们可以很方便地将Word文档换为PDF格式。这个开源库具有强大的功能和易于使用的API,并且支持各种Word文档换操作。 ### 回答3: 在.NET平台上,存在多种可用的开源库来实现Word文档换为PDF格式的功能。下面将介绍其中两个常用的开源库。 1. Aspose.Words for .NET Aspose.Words是一款功能强大的.NET组件库,可以处理各种Word文档操作,包括换为PDF。它提供了简单易用的API,可通过几行代码实现Word到PDF的换。以下是使用Aspose.Words进行换的示例代码: ``` using Aspose.Words; string sourceFilePath = "path/to/word.docx"; string targetFilePath = "path/to/output.pdf"; Document doc = new Document(sourceFilePath); doc.Save(targetFilePath, SaveFormat.Pdf); ``` 2. Spire.Doc for .NET Spire.Doc是另一个功能强大的.NET组件库,也可以用于将Word文档换为PDF。它提供了丰富的API,可以用于创建、编辑和Word文档。以下是使用Spire.Doc进行换的示例代码: ``` using Spire.Doc; using Spire.Doc.Documents; string sourceFilePath = "path/to/word.docx"; string targetFilePath = "path/to/output.pdf"; Document doc = new Document(); doc.LoadFromFile(sourceFilePath); doc.SaveToFile(targetFilePath, FileFormat.PDF); ``` 这些开源库都是经过广泛应用和验证的,可以满足大多数Word到PDF换的需求。使用时,需要下载对应的库文件并将其添加到项目中,并在代码中引入相应的命名空间。由于涉及到文件操作,需要确保代码有足够的权限读取和写入文件。
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值