尋找熱愛表達的你#
"一鍵將網頁截圖制作成HTML網頁"是指一種技術,它允許用戶通過簡單的操作,將網頁的截圖轉換成HTML代碼的網頁。這通常涉及到自動布局、樣式提取和代碼生成。以下是實現這一功能的相關技術和步驟:
1. 截圖捕捉:首先,需要有一個方法來捕捉網頁的截圖,這可以通過瀏覽器插件、屏幕捕獲工具或專門的應用程序來完成。
2. 圖像處理:捕捉到的截圖可能需要進行預處理,比如裁剪、壓縮或調整分辨率,以確保圖像的質量。
3. 元素識別:使用圖像識別技術來分析截圖,識別網頁中的元素,比如文本、按鈕、圖片等。
4. 布局分析:基于識別出的元素,分析頁面的布局信息,包括元素的大小、位置和層級。
5. 樣式解析:提取頁面的樣式信息,包括顏色、字體、間距等,并將它們轉換為CSS代碼。
6. HTML生成:根據布局和樣式信息,生成HTML結構代碼,將截圖中的元素轉換為HTML標簽。
7. 代碼優化:對生成的HTML代碼進行優化,確保代碼的可讀性、維護性和性能。
8. 響應式設計:確保生成的網頁代碼能夠適應不同的屏幕尺寸和設備,實現響應式布局。
9. 交互性實現:如果截圖中的頁面包含交互元素,需要添加相應的JavaScript代碼來實現這些交互。
10. 一鍵操作:提供一個簡單的用戶界面,用戶只需點擊一個按鈕,就可以完成截圖到HTML的轉換。
11. 預覽功能:在轉換過程中提供實時預覽,讓用戶可以實時看到轉換效果。
12. 自定義選項:允許用戶對生成的HTML代碼進行自定義,比如修改布局、添加額外的樣式或功能。
13. 保存和導出:用戶可以保存或導出生成的HTML代碼,以便進一步使用或分享。
14. 錯誤處理:在轉換過程中識別和處理潛在的錯誤,比如布局沖突或樣式問題。
15. 兼容性測試:確保生成的網頁在不同的瀏覽器和設備上都能正常顯示和工作。
16. 安全性考慮:生成的代碼應遵循安全最佳實踐,避免潛在的安全風險。
17. 用戶反饋:收集用戶反饋,不斷改進轉換算法和用戶體驗。
18. 開源和社區支持:作為開源項目,鼓勵社區參與貢獻代碼和改進功能。
這種一鍵轉換技術可以大大提高網頁開發的效率,尤其是對于快速原型設計和演示目的。然而,需要注意的是,自動生成的代碼可能需要進一步的人工審查和調整,以確保最終產品的質量和性能。此外,一些復雜的網頁效果和動態交互可能需要手動編寫代碼來實現。
js2flowchart 是一個可視化庫,可將任何JavaScript代碼轉換為漂亮的SVG流程圖。你可以輕松地利用它學習其他代碼、設計你的代碼、重構代碼、解釋代碼。這樣一個強大的神器,真的值得你擁有,看下面截圖就知道了,有沒有很強大。
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
yarn add js2flowchart
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>fly測試</title> </head> <body> <div style="width:50%;float:left"> <p id="svgImage"></p> </div> <div style="width:50%;float:left"> <textarea name="" id="jsContent" style="width: 90%;height:900px" oninput="createSVG()"> </textarea> </div> <script src="./node_modules/js2flowchart/dist/js2flowchart.js"></script> <script src="./index.js"></script> </body> </html>
index.js
createSVG = () => { document.getElementById("svgImage").innerHTML = null; let code = document.getElementById("jsContent").value; const { createFlowTreeBuilder, createSVGRender } = js2flowchart; const flowTreeBuilder = createFlowTreeBuilder(), svgRender = createSVGRender(); const flowTree = flowTreeBuilder.build(code), shapesTree = svgRender.buildShapesTree(flowTree); const svg = shapesTree.print(); document.getElementById("svgImage").innerHTML = svg; }; createSVG();
我們直接在文本域中輸入自己的代碼,如下,左邊會直接生成流程圖,這只是一個簡單的示例:
js2flowchart獲取您的JS代碼并返回SVG流程圖,適用于客戶端/服務器,支持ES6。
主要特點:
用例場景:
以上所有功能可以直接到github上詳細了解,用法太多,這里就不在介紹了!
這么強大的東西,有人肯定說如果在開發的時候實時看到流程圖有助于理解代碼,官網提供了插件(我在最新版中測試失效了,不知道是否是我使用的有問題還是插件本身的問題),如果感興趣的可以到擴展商店搜索code-flowchart。如果測試成功,歡迎到評論區分享。以下是我vscode版本和官網的插件使用截圖。
如果利用好這個插件,可以開發出Chrome插件,以及其他JavaScript編輯器或者IDEA的插件,由于官方github已經幾個月沒更新了,所以還不知道未來會不會支持!
js2flowchart是一個比較實用的Javascript插件,可以用來做很多事情,不管是自己寫代碼。還是閱讀別人的代碼,都無疑是一大助力,能夠幫助我們提升我們的代碼能力,更容易的閱讀代碼,這樣學習起來就快了,希望對你有所幫助!如果有什么好的建議,也可以到評論區分享!
持原創,共同進步!請關注我,后續分享更精彩!
項目中經常有生成圖表報告的需求。實現的方式有很多,下面幾種方案,各有優缺點。
純java后端實現:后端JFreeChart等繪制庫畫好圖表,再通過itext庫導出為pdf。該方案能實現簡單的圖表功能,樣式、格式調整等可能會花大量時間。適合中小型報表開發項目。
前端繪制圖表,后端運行時命令調用wkhtmltopdf生成pdf:后端通過運行時命令調用node js,js使用wkhtmltopdf庫動態訪問報表url地址,HTML內容渲染完成后生成pdf文件。該方案,使用純前端js繪制圖表,能實現復雜需求。但wkhtmltopdf庫對不同瀏覽器的js存在兼容性問題,導出成pdf文件時存在各種坑,在單頁面技術支持還不太成熟。適合豐富報表的pdf導出,但兼容性問題維護成本太高。
前端繪制圖表,后端運行時命令調用puppeteer生成pdf:后端通過運行時命令調用node js,js使用puppeteer庫動態訪問報表url地址,HTML內容渲染完成后生成pdf文件。該方案和wkhtmltopdf方案類似,但兼容性更好。puppeteer是 Chrome 開發團隊在 2017 年發布的一個 Node.js 包,用來模擬 Chrome 瀏覽器的運行。可以在無界面的環境中運行Chrome或通過命令行、程序語言操作 Chrome。理論上Chrome中顯示的圖表,就能通過該庫生成一致的pdf文件內容,不用浪費很多時間在頁面樣式和兼容性問題上。
本文選擇puppeteer方案介紹如何生成一個pdf報表。細心的小伙伴可能注意到了,既然puppeteer是js庫,為什么不直接前端導出pdf,干嘛這么麻煩還通過后端繞一圈來實現?
這主要出于需求和用戶體驗的考慮,有些業務場景需要通過api接口動態生成pdf報表,不需要用戶訪問界面。如果生成的pdf的報表很大,直接在用戶端生成,可能占用大量客戶端資源,導致頁面崩潰或假死,從而影響使用體驗。
1.先安裝NodeJs,網上教程很多,本文不再贅述。
2.安裝puppeteer依賴,如果npm下載不成功就使用cnpm命令(cnpm需要先安裝)
npm install puppeteer --save
3.在安裝puppeteer依賴的目錄下創建page2pdf.js
const puppeteer = require('puppeteer');
const options = process.argv;
var siteUrl;
//執行 node page2pdf.js https://www.baidu.com
(async() => {
if(options.length>=3){
siteUrl=options[2];
//types=options[3];
//console.log(siteUrl);
}
const browser = await puppeteer.launch();
const page = await browser.newPage();
//console.log(options.length);
//console.log(options[0]);
//console.log(options[1]);
//console.log(options[2]);
//console.log(options[3]);
const userAgent = "Mozilla/5.0 (Linux; Android 8.1.0; MI 8 Build/OPM1.171019.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/62.0.3202.84 Mobile Safari/537.36";
page.setUserAgent(userAgent);
await page.setViewport({ width: 1000, height: 1080 });
//await page.setViewport({ width: 480, height: 800,isMobile: true});
//通過css樣式可見,動態設置站點加載完成標識。
//page.waitForSelector('img').then(() => console.log('siteUrl with page load success: ' + siteUrl));
await page.goto(siteUrl, {timeout: 10*60000, waitUntil: 'networkidle2'});
/**await page.goto(siteUrl, {timeout: 10*60000, waitUntil: 'networkidle2'})
.catch(e => {
console.log(siteUrl+" is error:"+e);
browser.close()
});*/
const pdf = await page.pdf({
path: 'page.pdf', //便于測試驗證,實際使用時可屏蔽
format: 'A4'
});
await browser.close();
process.stdout.write(pdf);
})();
page2pdf.js文件引入puppeteer依賴庫,通過傳入siteUrl參數訪問HTML page頁面,page.pdf生成文件,再通過process.stdout.write(pdf)返回java后臺。
4.創建java PuppeteerHtmlToPdf.java文件
/**
* 用谷歌提供的node實現的Puppeteer,實現網頁生成pdf文件
*/
public class PuppeteerHtmlToPdf {
/**
* html轉pdf,直接通過流輸出到瀏覽器
* @param response 瀏覽器響應
* @param fileName 文件名稱
* @param puppeteerjs 要采用哪個js文件執行
* @param webSiteUrl 要生成pdf的網頁
*/
public static void parseHtml2Pdf(HttpServletResponse response, String fileName, String puppeteerjs, String webSiteUrl) {
try {
Runtime rt = Runtime.getRuntime();
Process p = rt.exec("node "+puppeteerjs+" "+webSiteUrl);
InputStream is = p.getInputStream();
BufferedInputStream bf=new BufferedInputStream(is);
byte[] data = IOUtils.toByteArray(bf);
fileName = URLEncoder.encode(fileName, "UTF-8");
response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
response.addHeader("Content-Length", "" + data.length);
response.setContentType("application/octet-stream;charset=UTF-8");
OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
outputStream.write(data);
outputStream.flush();
outputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
5.報表生成
page2pdf.js頁面目錄打開命令行,執行指令。
運行指令,生成pdf
node page2pdf.js https://www.baidu.com
查看對應目錄,已動態生成了一個page.pdf文件
打開pdf文件,對應HTML內容已生成。
本文介紹了報表導出pdf的3種方式,通過優缺點分析,詳細闡述了puppeteer的實現方式。并通過百度頁面的pdf導出做了演示。
希望本文對有類似報表pdf導出需求的小伙伴有所參考和幫助。若存在不足或更好方案,請留言討論。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。