何把网页上的内容用javascript来实现截图？今天分享的html2canvas就可以。

介绍

在微信项目中经常会遇到动态生成海报的需求，Web前端合成图片往往会使用canvas。canvas虽然强大，但用来合成海报非常繁琐，一不小心就几百行代码了。而html2canvas.js是一款轻松地将HTML+CSS写成的布局直接转换成canvas，生成可保存分享的图片。

特点

• 兼容现代浏览器，手机项目可放心大胆使用；
• 官网文档清晰简单，用法简单支持npm/yarn和cdn引入，有充足的代码例子；
• 支持部分常用的CSS属性，配合图片使用几乎能满足所有动态生成海报的需求。

使用体验

这是一个把HTML的DOM结构根据所支持的CSS样式生成canvas的js开源库，CSS的写法千变万化，不同的布局有很多不同的写法，因此html2canvas是不能100%还原网页的样式，因此不用用于像电脑屏幕截图这样的需求中。

使用的时候要注意查看所支持的CSS属性，尽量使用这些属性来写布局，不支持的效果可以尝试用图片来实现。只要产品经理脑子在线，目测几乎没有什么海报需求是实现不了的。

官网是英文的，写得很专业，谷歌翻译阅读无压力。

免费使用说明

html2canvas 由开发者 Niklas von Hertzen 创建，基于MIT许可开源，可以免费使用在任何项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的相关网址。

0230112星期四:

现文档在线预览的方式除了上篇文章《文档在线预览（一）通过将txt、word、pdf转成图片实现在线预览功能》说的将文档转成图片的实现方式外，还有转成pdf，前端通过pdf.js、pdfobject.js等插件来实现在线预览，以及本文将要说到的将文档转成html的方式来实现在线预览。代码基于 aspose-words（用于word转html），pdfbox（用于pdf转html），所以事先需要在项目里下面两个依赖：

<dependency>    
    <groupId>com.luhuiguo</groupId>    
    <artifactId>aspose-words</artifactId>    
    <version>23.1</version></dependency>
<dependency>    
    <groupId>org.apache.pdfbox</groupId>    
    <artifactId>pdfbox</artifactId>    
    <version>2.0.4</version>
</dependency>

一、将文件转换成html字符串

1、将word文件转成html字符串

public static String wordToHtmlStr(String wordPath) {
        try {
            Document doc=new Document(wordPath); // Address是将要被转化的word文档
            String htmlStr=doc.toString();
            return htmlStr;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

验证结果：

2、将pdf文件转成html字符串

public static String pdfToHtmlStr(String pdfPath) throws IOException, ParserConfigurationException {
        PDDocument document=PDDocument.load(new File(pdfPath));
        Writer writer=new StringWriter();
        new PDFDomTree().writeText(document, writer);
        writer.close();
        document.close();
        return writer.toString();
    }

验证结果：

二、将文件转换成html，并生成html文件

有时我们是需要的不仅仅返回html字符串，而是需要生成一个html文件这时应该怎么做呢？一个改动量小的做法就是使用org.apache.commons.io包下的FileUtils工具类写入目标地址：

FileUtils类将html字符串生成html文件示例：

首先需要引入pom：

        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.8.0</version>
        </dependency>

相关代码：

String htmlStr=FileConvertUtil.pdfToHtmlStr("D:\\书籍\\电子书\\小说\\历史小说\\最后的可汗.doc");
FileUtils.write(new File("D:\\test\\doc.html"), htmlStr, "utf-8");

除此之外，还可以对上面的代码进行一些调整，已实现生成html文件，代码调整如下：

1、将word文件转换成html文件

public static void wordToHtml(String wordPath, String htmlPath) {
        try {
            File sourceFile=new File(wordPath);
            String path=htmlPath + File.separator + sourceFile.getName().substring(0, sourceFile.getName().lastIndexOf(".")) + ".html";
            File file=new File(path); // 新建一个空白pdf文档
            FileOutputStream os=new FileOutputStream(file);
            Document doc=new Document(wordPath); // Address是将要被转化的word文档
            HtmlSaveOptions options=new HtmlSaveOptions();
            options.setExportImagesAsBase64(true);
            options.setExportRelativeFontSize(true);
            doc.save(os, options);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

验证结果：

2、将pdf文件转换成html文件

public static void pdfToHtml(String pdfPath, String htmlPath) throws IOException, ParserConfigurationException {
        File file=new File(pdfPath);
        String path=htmlPath + File.separator + file.getName().substring(0, file.getName().lastIndexOf(".")) + ".html";
        PDDocument document=PDDocument.load(new File(pdfPath));
        Writer writer=new PrintWriter(path, "UTF-8");
        new PDFDomTree().writeText(document, writer);
        writer.close();
        document.close();
    }

图片版PDF文件验证结果：

文字版PDF文件验证结果：