何把網頁上的內容用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文件驗證結果：