整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
大家好，今天為大家分享一個由 www.helloworld.net 網站開發(fā)并開源的一個非常好用的工具 html2md, 并且源碼已經開源，再遇到喜歡的文章，就可以只輸入一個url，就能轉換成markdown文件了，使用非常的簡單
現(xiàn)在好的技術文章確實多，每天各種技術群里，各種技術社區(qū)，有很多質量非常好的技術文章，于是我們就收藏了，可是問題來了，我們收藏到哪呢？
最可氣的是，我收藏的文章，可能過了10天后，作者把這個文章刪除了，我真是。。。。。無語了。。。。
所以，helloworld.net的創(chuàng)始人之一水手花了一個周末的時間，開發(fā)了一款這樣的小工具，使用很簡單，代碼也很簡單，并且將其開源了出去，非常的好用
而且helloworld.net也提供了官方的鏈接， 大家可以試用一下
html2md已經開源并托管在github上
地址： https://github.com/helloworld-Co/html2md
javascript 開發(fā)的，具體是用vue框架開發(fā)的，做前端開發(fā)的小伙伴們恭喜了
主要使用以下技術棧
- vue 前端三劍客之一，主張最少，具有高度靈活性的漸進式框架
- nuxt 通過利用 Vue.js 和 Node.js最佳實踐來構建高性能應用程序
- express 基于 Node.js 平臺，快速、開放、極簡的 Web 開發(fā)框架
- element-ui 宇宙第一 Vue 第三方組件庫，有不服？
- js-dom 一款可在 Node 環(huán)境下模擬瀏覽器的 API 的庫
- turndown 使用 JavaScript 將 HTML 轉換為 Markdown
- axios 易用、簡潔且高效的 http庫，支持瀏覽器和 Node 環(huán)境。
- mavon-editor 一款基于 Vue 的 markdown 編輯器，支持所見即所得
- sass 強大的 Css 預處理器之一
也可以下載源碼編譯直接可以跑起來的
具體步驟如下：
第一步：下載
git clone git@github.com:helloworld-Co/html2md.git
cd ./html2md第二步：安裝
npm install
或者
yarn install第三步：啟動
npm run dev
或者
yarn dev是不是很簡單，由于時倉促，代碼難免有bug，歡迎提出，我們隨時修改
html2md只是www.helloworld.net官方開源的一個小工具，后續(xù)我們還會開發(fā)出其它的有用的工具或者一些軟件，做一個真正為程序員著想的開發(fā)者社區(qū)
最后 ，如果你趕興趣，可以關注一下我們
后面還會發(fā)布更多的關于IT技術，編程，創(chuàng)業(yè)，資訊相關的文章
家好，很高興又見面了，我是"高級前端進階"，由我?guī)е蠹乙黄痍P注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發(fā)!
ai2html 是 Adob?e Illustrator 的開源腳本，可將 Illustrator 文檔轉換為 html 和 css，基于 ai2html 的諸多示例登上了 New York Times。
ai2html由不同的組成部分：
目前 ai2html 在 Github 上開源，是一個值得關注的 AI 類前端開源項目。
很多人會有此疑問，為什么不直接將 Illustrator 文件導出為圖像或 SVG？
圖像和 SVG 中的文本會隨著圖像的縮放而縮放，因此當藝術品縮小時，文本很快就會變得難以辨認，或者在放大時看起來非常大。
通過將文本渲染為 html，可以上下縮放“圖形”同時保持文本在相同的字體大小和行高下可讀，從而適應從手機到巨型桌面顯示器的視口。
可以打開鏈接 http://nyti.ms/1CQdkwq ，然后查看頁面時更改窗口大小，此時將看到圖稿比例變化，但文本保持相同大小。 更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive
同時，當 Illustrator 保存 SVG 時，每一行文本都會被分解為單獨的 SVG 元素，這使得編輯文本變得非常困難。 通過以 HTML 形式渲染文本，編輯人員可以更輕松地進入 CMS 并進行編輯，而無需費力地瀏覽一堆 SVG 代碼。
當然，ai2html 也有一定的局限性，主要體現(xiàn)在以下幾點：
將 ai2html 的 CDN 文件下載保存到電腦，下載地址已經在文末給出。
將 ai2html.js 文件移動到腳本所在的 Illustrator 文件夾中。 例如，在運行 Adobe Illustrator CC 2015 的 Mac 上，路徑為：
/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js接著按照以下步驟使用 ai2html：
http://ai2html.org/
https://github.com/newsdev/ai2html
https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js
poi-tl是一個基于Apache POI的Word模板引擎，也是一個免費開源的Java類庫。同類型的FreeMarker或Velocity基于文本模板和數(shù)據(jù)生成新的html頁面或配置文件。而poi tl是一個基于Word模板和數(shù)據(jù)生成新文檔的Word模板引擎。
Word模板具有豐富的樣式。Poi-tl將在生成的文檔中完美地保留模板中的樣式。也可以設置標記的樣式。標記的樣式將應用于替換的文本，因此您可以專注于模板設計。
poi-tl是一個“無邏輯”模板引擎。沒有復雜的控制結構和變量分配，只有標簽，有些標簽可以用文本、圖片、表格等代替，有些標簽會隱藏某些文檔內容，而另一些標簽會循環(huán)一系列文檔內容。
像變量賦值或條件語句這樣的“強大”構造可以很容易地在模板系統(tǒng)中專門修改應用程序的外觀。。。然而，以分離為代價，將模板本身變成應用程序邏輯的一部分。
poi-tl支持自定義函數(shù)（插件），函數(shù)可以在Word模板的任何地方執(zhí)行，在文檔的任何地方做任何事情都是poi-tl的目標。
GitHub - Sayi/poi-tl: Generate awesome word(docx) with template
Poi-tl Documentation (deepoove.com)
Apache License 2.0
下面表格是官方文檔中提供的與其他模板引擎的對比
方案 | 移植性 | 功能性 | 易用性 |
Poi-tl | Java跨平臺 | Word模板引擎，基于Apache POI，提供更友好的API | 低代碼，準備文檔模板和數(shù)據(jù)即可 |
Apache POI | Java跨平臺 | Apache項目，封裝了常見的文檔操作，也可以操作底層XML結構 | 文檔不全，這里有一個教程：Apache POI Word快速入門 |
Freemarker | XML跨平臺 | 僅支持文本，很大的局限性 | 不推薦，XML結構的代碼幾乎無法維護 |
OpenOffice | 部署OpenOffice，移植性較差 | - | 需要了解OpenOffice的API |
HTML瀏覽器導出 | 依賴瀏覽器的實現(xiàn)，移植性較差 | HTML不能很好的兼容Word的格式，樣式糟糕 | - |
Jacob、winlib | Windows平臺 | - | 復雜，完全不推薦使用 |
Word模板引擎功能 | 描述 |
文本 | 將標簽渲染為文本 |
圖片 | 將標簽渲染為圖片 |
表格 | 將標簽渲染為表格 |
列表 | 將標簽渲染為列表 |
圖表 | 條形圖（3D條形圖）、柱形圖（3D柱形圖）、面積圖（3D面積圖）、折線圖（3D折線圖）、雷達圖、餅圖（3D餅圖）、散點圖等圖表渲染 |
If Condition判斷 | 根據(jù)條件隱藏或者顯示某些文檔內容（包括文本、段落、圖片、表格、列表、圖表等） |
Foreach Loop循環(huán) | 根據(jù)集合循環(huán)某些文檔內容（包括文本、段落、圖片、表格、列表、圖表等） |
Loop表格行 | 循環(huán)復制渲染表格的某一行 |
Loop表格列 | 循環(huán)復制渲染表格的某一列 |
Loop有序列表 | 支持有序列表的循環(huán)，同時支持多級列表 |
Highlight代碼高亮 | word中代碼塊高亮展示，支持26種語言和上百種著色樣式 |
Markdown | 將Markdown渲染為word文檔 |
Word批注 | 完整的批注功能，創(chuàng)建批注、修改批注等 |
Word附件 | Word中插入附件 |
SDT內容控件 | 內容控件內標簽支持 |
Textbox文本框 | 文本框內標簽支持 |
圖片替換 | 將原有圖片替換成另一張圖片 |
書簽、錨點、超鏈接 | 支持設置書簽，文檔內錨點和超鏈接功能 |
Expression Language | 完全支持SpringEL表達式，可以擴展更多的表達式：OGNL, MVEL… |
樣式 | 模板即樣式，同時代碼也可以設置樣式 |
模板嵌套 | 模板包含子模板，子模板再包含子模板 |
合并 | Word合并Merge，也可以在指定位置進行合并 |
用戶自定義函數(shù)(插件) | 插件化設計，在文檔任何位置執(zhí)行函數(shù) |
<dependency>
<groupId>com.deepoove</groupId>
<artifactId>poi-tl</artifactId>
<version>1.12.1</version>
</dependency>implementation 'com.deepoove:poi-tl:1.12.1'ConfigureBuilder builder = Configure.builder();poi-tl所有的標簽都是以{{開頭，以}}結尾，這是為了致敬Google CTemplate。標簽可以出現(xiàn)在任何位置，包括頁眉，頁腳，表格內部，文本框等，表格布局可以設計出很多優(yōu)秀專業(yè)的文檔，推薦使用表格布局。
當然如果你更偏愛freemarker ${} 的方式，也可以添加如下配置修改標簽的前后綴配置：
builder.buildGramer("${", "}");XWPFTemplate template = XWPFTemplate.compile("template.docx", builder.buid());poi-tl加載使用XWPFTemplate.compile方法來加載模板，支持模板以絕對路徑（String），F(xiàn)ile、InputStream、XWPFDocument四種格式傳入。
poi-tl數(shù)據(jù)類似于哈?；蛘咦值?，可以是Map結構（key是標簽名稱）：
Map<String, Object> data = new HashMap<>();
data.put("name", "Sayi");
data.put("start_time", "2019-08-04");
template.render(dataMap);poi-tl以流的方式進行輸出：
template.write(OutputStream stream);可以寫到任意輸出流中，比如文件流：
template.write(new FileOutputStream("output.docx"));如網絡流：
response.setContentType("application/octet-stream");
response.setHeader("Content-disposition","attachment;filename=\""+"out_template.docx"+"\"");
// HttpServletResponse response
OutputStream out = response.getOutputStream();
BufferedOutputStream bos = new BufferedOutputStream(out);
template.write(bos);
bos.flush();
out.flush();
PoitlIOUtils.closeQuietlyMulti(template, bos, out);{{var}}代碼示例
put("name", "Sayi");
put("author", new TextRenderData("000000", "Sayi"));
put("link", new HyperlinkTextRenderData("website", "http://deepoove.com"));
put("anchor", new HyperlinkTextRenderData("anchortxt", "anchor:appendix1"));除了new操作符，還提供了更加優(yōu)雅的工廠 Texts 和鏈式調用的方式輕松構建文本模型。
鏈式代碼示例
put("author", Texts.of("Sayi").color("000000").create());
put("link", Texts.of("website").link("http://deepoove.com").create());
put("anchor", Texts.of("anchortxt").anchor("appendix1").create());圖片標簽以@開始：{{@var}}// 指定圖片路徑
put("image", "logo.png");
// svg圖片
put("svg", "https://img.shields.io/badge/jdk-1.6%2B-orange.svg");
// 設置圖片寬高
put("image1", Pictures.ofLocal("logo.png").size(120, 120).create());
// 圖片流
put("streamImg", Pictures.ofStream(new FileInputStream("logo.jpeg"), PictureType.JPEG)
.size(100, 120).create());
// 網絡圖片(注意網絡耗時對系統(tǒng)可能的性能影響)
put("urlImg", Pictures.ofUrl("http://deepoove.com/images/icecream.png")
.size(100, 100).create());
// java圖片
put("buffered", Pictures.ofBufferedImage(bufferImage, PictureType.PNG)
.size(100, 100).create());表格標簽以#開始：{{#var}}// 一個2行2列的表格
put("table0", Tables.of(new String[][] {
new String[] { "00", "01" },
new String[] { "10", "11" }
}).border(BorderStyle.DEFAULT).create());// 第0行居中且背景為藍色的表格
RowRenderData row0 = Rows.of("姓名", "學歷").textColor("FFFFFF")
.bgColor("4472C4").center().create();
RowRenderData row1 = Rows.create("李四", "博士");
put("table1", Tables.create(row0, row1));// 合并第1行所有單元格的表格
RowRenderData row0 = Rows.of("列0", "列1", "列2").center().bgColor("4472C4").create();
RowRenderData row1 = Rows.create("沒有數(shù)據(jù)", null, null);
MergeCellRule rule = MergeCellRule.builder().map(Grid.of(1, 0), Grid.of(1, 2)).build();
put("table3", Tables.of(row0, row1).mergeRule(rule).create());列表標簽以*開始：{{*var}}put("list", Numberings.create("Plug-in grammar",
"Supports word text, pictures, table...",
"Not just templates"));首先我們建立一個word文件，在word文件里填充一下內容。
import com.deepoove.poi.XWPFTemplate;
import com.deepoove.poi.config.Configure;
import com.deepoove.poi.config.ConfigureBuilder;
import com.deepoove.poi.data.*;
import dto.Qiankuan;
import java.io.FileInputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.time.LocalDate;
import java.util.*;
public class PoitlTest {
public static void main(String[] args) throws IOException {
ConfigureBuilder builder = Configure.builder();
//獲取模板的文件流
FileInputStream fileInputStream = new FileInputStream("D:\\文章\\word生成\\poi-tl\\qiantiao.docx");
HashMap<String, Object> dataMap = new HashMap<>();
//添加文本
LocalDate currentDate = LocalDate.now();
LocalDate endDate = currentDate.plusYears(1L);
dataMap.put("debtor", "陳有楚");
dataMap.put("nowYear", String.valueOf(currentDate.getYear()));
dataMap.put("nowMonth", String.valueOf(currentDate.getMonthValue()));
dataMap.put("nowDay", String.valueOf(currentDate.getDayOfMonth()));
//驗證換行的情況
dataMap.put("arrears", "\n一頓老魏，\n貴州大黃牛，\nv我50");
dataMap.put("endYear", String.valueOf(endDate.getYear()));
dataMap.put("endMonth", String.valueOf(endDate.getMonthValue()));
dataMap.put("endDay", String.valueOf(endDate.getDayOfMonth()));
//添加列表
List<String> list = Arrays.asList("阿大", "阿二", "阿三");
Numberings.NumberingBuilder numberingBuilder = Numberings.of(NumberingFormat.DECIMAL);
for (String s : list) {
numberingBuilder.addItem(s);
}
dataMap.put("witness", numberingBuilder.create());
//添加圖片，考慮到實際生產環(huán)境圖片大都都從文件服務獲取，所以這里用圖片流做例子
PictureRenderData pictureRenderData = Pictures.ofStream(Files.newInputStream(Paths.get("D:\\picture\\其他\\24-05-23-142418.png")), PictureType.JPEG)
.size(300, 220).create();
dataMap.put("image1", pictureRenderData);
List<Qiankuan> qiankuanList = getQiankuanList();
//添加表格
//填充表頭，表格的第一行
RowRenderData row0 = Rows.of("拖欠物品", "拖欠次數(shù)", "償還期限").center().bgColor("4472C4").create();
Tables.TableBuilder tableBuilder = Tables.of(row0);
//填充表格內容
for (Qiankuan qiankuan : qiankuanList) {
RowRenderData row = Rows.create(qiankuan.getName(), String.valueOf(qiankuan.getCount()), qiankuan.getQixian());
tableBuilder.addRow(row);
}
//MergeCellRule rule = MergeCellRule.builder().map(MergeCellRule.Grid.of(1, 0), MergeCellRule.Grid.of(1, 2)).build();
//tableBuilder.mergeRule(rule);
dataMap.put("table1", tableBuilder.create());
ChartMultiSeriesRenderData chart = Charts
.ofMultiSeries("ChartTitle", new String[] { "中文", "English" })
.addSeries("countries", new Double[] { 15.0, 6.0 })
.addSeries("speakers", new Double[] { 223.0, 119.0 })
.create();
dataMap.put("barChart", chart);
XWPFTemplate template = XWPFTemplate.compile(fileInputStream, builder.build())
.render(dataMap);
template.writeAndClose(Files.newOutputStream(Paths.get("D:\\test\\qiantiao-poitl.docx")));
System.out.println("success");
}
static List<Qiankuan> getQiankuanList() {
List<Qiankuan> list = new ArrayList<>();
Qiankuan q1 = new Qiankuan();
q1.setName("一頓老魏");
q1.setCount(1);
q1.setQixian("三月內");
list.add(q1);
Qiankuan q2 = new Qiankuan();
q2.setName("一頓大黃牛");
q2.setCount(1);
q2.setQixian("半年內");
list.add(q2);
Qiankuan q3 = new Qiankuan();
q3.setName("特一特");
q3.setCount(3);
q3.setQixian("一周內");
list.add(q3);
Qiankuan q4 = new Qiankuan();
q4.setName("v我50");
q4.setCount(5);
q4.setQixian("一周內");
list.add(q4);
return list;
}
}*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
