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插件,可以用來做很多事情,不管是自己寫代碼。還是閱讀別人的代碼,都無疑是一大助力,能夠幫助我們提升我們的代碼能力,更容易的閱讀代碼,這樣學習起來就快了,希望對你有所幫助!如果有什么好的建議,也可以到評論區分享!
者開源了一個Web思維導圖,在做導出為圖片的功能時走了挺多彎路,所以通過本文來記錄一下。
思維導圖的節點和連線都是通過 svg渲染的,作為一個純 js 庫,我們不考慮通過后端來實現,所以只能思考如何通過純前端的方式來實現將svg或html轉換為圖片。
我們都知道 img 標簽可以顯示 svg,然后 canvas 又可以渲染 img,那么是不是只要將svg渲染到img標簽里,再通過canvas導出為圖片就可以呢,答案是肯定的。
const svgToPng = async (svgStr) => {
// 轉換成blob數據
let blob = new Blob([svgStr], {
type: 'image/svg+xml'
})
// 轉換成data:url數據
let svgUrl = await blobToUrl(blob)
// 繪制到canvas上
let imgData = await drawToCanvas(svgUrl)
// 下載
downloadFile(imgData, '圖片.png')
}
svgStr是要導出的svg字符串,比如:
然后通過Blob構造函數創建一個類型為image/svg+xml的blob數據,接下來將blob數據轉換成data:URL:
const blobToUrl = (blob) => {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.onload = evt => {
resolve(evt.target.result)
}
reader.onerror = err => {
reject(err)
}
reader.readAsDataURL(blob)
})
}
其實就是base64格式的字符串。
接下來就可以通過img來加載,并渲染到canvas里進行導出:
const drawToCanvas = (svgUrl) => {
return new Promise((resolve, reject) => {
const img = new Image()
// 跨域圖片需要添加這個屬性,否則畫布被污染了無法導出圖片
img.setAttribute('crossOrigin', 'anonymous')
img.onload = async () => {
try {
let canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
resolve(canvas.toDataURL())
} catch (error) {
reject(error)
}
}
img.onerror = e => {
reject(e)
}
img.src = svgUrl
})
}
canvas.toDataURL()方法返回的也是一個base64格式的data:URL字符串:
最后就可以通過a標簽來下載:
const downloadFile = (file, fileName) => {
let a = document.createElement('a')
a.href = file
a.download = fileName
a.click()
}
實現很簡單,效果也不錯,不過這樣就沒問題了嗎,接下來我們插入兩張圖片試試。
第一張圖片是使用base64的data:URL方式插入的,第二張圖片是使用普通url插入的:
導出結果如下:
可以看到,第一張圖片沒有問題,第二張圖片裂開了,可能你覺得同源策略的問題,但實際上換成同源的圖片,同樣也是裂開的,解決方法很簡單,遍歷svg節點樹,將圖片都轉換成data:URL的形式即可:
// 操作svg使用了@svgdotjs/svg.js庫
const transfromImg = (svgNode) => {
let imageList = svgNode.find('image')
let task = imageList.map(async item => {
// 獲取圖片url
let imgUlr = item.attr('href') || item.attr('xlink:href')
// 已經是data:URL形式不用轉換
if (/^data:/.test(imgUlr)) {
return
}
// 轉換并替換圖片url
let imgData = await drawToCanvas(imgUlr)
item.attr('href', imgData)
})
await Promise.all(task)
return svgNode.svg()// 返回svg html字符串
}
這里使用了前面的drawToCanvas方法來將圖片轉換成data:URL,這樣導出就正常了:
到這里,將純 svg 轉換為圖片就基本沒啥問題了。
svg提供了一個foreignObject標簽,可以插入html節點,實際上,筆者就是使用它來實現節點的富文本編輯效果的:
接下來使用前面的方式來導出,結果如下:
明明顯示沒有問題,導出時foreignObject內容卻發生了偏移,這是為啥呢,其實是因為默認樣式的問題,頁面全局清除了margin和padding,以及將box-sizing設置成了border-box:
那么當svg存在于文檔樹中時是沒有問題的,但是導出時使用的是svg字符串,是脫離于文檔的,所以沒有這個樣式覆蓋,那么顯示自然會出現問題,知道了原因,解決方法有兩種,一是遍歷所有嵌入的html節點,手動添加內聯樣式,注意一定要給所有的html節點都添加,只給svg、foreignObject或最外層的html節點添加都是不行的;第二種是直接在foreignObject標簽里添加一個style標簽,通過style標簽來加上樣式,并且只要給其中一個foreignObject標簽添加就可以了,兩種方式看你喜歡哪種,筆者使用的是第二種:
const transformForeignObject = (svgNode) => {
let foreignObjectList = svgNode.find('foreignObject')
if (foreignObjectList.length > 0) {
foreignObjectList[0].add(SVG(`<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>`))
}
return svgNode.svg()
}
導出結果如下:
可以看到,一切正常。
關于兼容性的問題,筆者測試了最新的chrome、firefox、opera、safari、360急速瀏覽器,運行都是正常的。
前面介紹的是筆者目前采用的方案,看著實現其實非常簡單,但是過程漫長且坎坷,接下來,開始我的表演。
對于svg的操作筆者使用的是svg.js庫,創建富文本節點的核心代碼大致如下:
import { SVG, ForeignObject } from '@svgdotjs/svg.js'
let html = `<div>節點文本</div>`
let foreignObject = new ForeignObject()
foreignObject.add(SVG(html))
g.add(foreignObject)
SVG方法是用來將一段html字符串轉換為dom節點的。
在chrome瀏覽器和opera瀏覽器上渲染非常正常,但是在firefox瀏覽器上foreignObject標簽的內容完全渲染不出來:
檢查元素也看不出有任何問題,并且神奇的是只要在控制臺元素里編輯一下嵌入的html內容,它就可以顯示了,百度搜索了一圈,也沒找到解決方法,然后因為firefox瀏覽器占有率并不高,于是這個問題就擱淺了。
chrome瀏覽器雖然渲染是正常的:
但是使用前面的方式導出時foreignObject標簽內容卻是跟在firefox瀏覽器里顯示一樣是空的:
firefox能忍這個不能忍,于是嘗試使用一些將html轉換為圖片的庫。
使用html2canvas:
import html2canvas from 'html2canvas'
const useHtml2canvas = async (svgNode) => {
let el = document.createElement('div')
el.style.position = 'absolute'
el.style.left = '-9999999px'
el.appendChild(svgNode)
document.body.appendChild(el)// html2canvas轉換需要被轉換的節點在文檔中
let canvas = await html2canvas(el, {
backgroundColor: null
})
mdocument.body.removeChild(el)
return canvas.toDataURL()
}
html2canvas可以成功導出,但是存在一個問題,就是foreignObject標簽里的文本樣式會丟失:
這應該是html2canvas的一個bug,不過看它這issues數量和提交記錄:
指望html2canvas改是不現實的,于是又嘗試使用dom-to-image:
import domtoimage from 'dom-to-image'
const dataUrl = domtoimage.toPng(el)
發現dom-to-image更不行,導出完全是空白的:
并且它上一次更新時間已經是五六年前,所以沒辦法,只能回頭使用html2canvas。
后來有人建議使用dom-to-image-more,粗略看了一下,它是在dom-to-image庫的基礎上修改的,嘗試了一下,發現確實可以,于是就改為使用這個庫,然后又有人反饋在一些瀏覽器上導出節點內容是空的,包括firefox、360,甚至chrome之前的版本都不行,筆者只能感嘆,太難了,然后又有人建議使用上一個大版本,可以解決在firefox上的導出問題,但是筆者試了一下,在其他一些瀏覽器上依舊存在問題,于是又在考慮要不要換回html2canvas,雖然它存在一定問題,但至少不是完全空的。
用的人多了,這個問題又有人提了出來,于是筆者又嘗試看看能不能解決,之前一直認為是firefox瀏覽器的問題,畢竟在chrome和opera上都是正常的,這一次就想會不會是svgjs庫的問題,于是就去搜它的issue,沒想到,還真的搜出來了issue,大意就是因為通過SVG方法轉換的dom節點是在svg的命名空間下,也就是使用document.createElementNS方法創建的,導致部分瀏覽器渲染不出來,歸根結底,這還是不同瀏覽器對于規范的不同實現導致的:
你說chrome很強吧,確實,但是無形中它阻止了問題的暴露。
知道了原因,那么修改也很簡單了,只要將SVG方法第二個參數設為true即可,或者自己來創建節點也可以:
foreignObject.add(document.createElemnt('div'))
果然,在firefox瀏覽器上正常渲染了。
解決了在firefox瀏覽器上foreignObject標簽為空的問題后,自然會懷疑之前使用img結合canvas導出圖片時foreignObject標簽為空會不會也是因為這個問題,同時了解了一下dom-to-image庫的實現原理,發現它也是通過將dom節點添加到svg的foreignObject標簽中實現將html轉換成圖片的,那么就很搞笑了,我本身要轉換的內容就是一個嵌入了foreignObject標簽的svg,使用dom-to-image轉換,它會再次把傳給它的svg添加到一個foreignObject標簽中,這不是套娃嗎,既然dom-to-image-more能通過foreignObject標簽成功導出,那么不用它必然也可以,到這里基本確信之前不行就是因為命名空間的問題。
果然,在去掉了dom-to-image-more庫后,重新使用之前的方式成功導出了,并且在firefox、chrome、opera、360等瀏覽器中都不存在問題,兼容性反而比dom-to-image-more庫好。
雖然筆者的實現很簡單,但是dom-to-image-more這個庫實際上有一千多行代碼,那么它到底多做了些什么呢,點個關注,我們下一篇文章再見。
著 Web 技術的發展,有很多需要將 HTML 內容轉換為 PDF 文檔并下載的場景,比如常見的收據、發票、電子報告、對賬清單、文檔翻譯等等。
本文將研究當前比較流行的基于 Node.js 技術棧的 HTML 轉 PDF 庫:Puppeteer、jsPDF 和 PDFKit,大綱如下:
Puppeteer 是谷歌開發的一個 Node.js 庫,為控制無頭(或完整)Chrome 或 Chromium 瀏覽器提供了一個高級 API。它是最流行的開源 HTML 到 PDF 轉換器,支持 HTML、CSS 和 JavaScript。
Puppeteer 允許您自動化Web瀏覽器中的各種任務,例如 Web 抓取、網站測試、截圖創建和 PDF 生成。它利用 Chrome 或 Chromium Web 瀏覽器的功能將 HTML 內容呈現為 PDF 文件。
下面使用 Puppeteer 快速初始化一個項目:
nvm use 20.6.1
mkdir puppeteer-demo
cd puppeteer-demo
npm init -y
npm install puppeteer
touch index.js
在 index.js 中添加如下代碼:
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch({
headless: 'new',
});
const page = await browser.newPage();
await page.setContent(
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
body {
display: grid;
place-items: center;
margin: 0;
background-color: #ccc;
min-height: 100vh;
}
</style>
<h1>Hello, Puppeteer!</h1>
</body>
</html>`
);
await page.pdf({ path: 'result.pdf', format: 'A4' });
await browser.close();
})();
在上面的代碼中,我們導入 Puppeteer 庫,啟動無頭 Chromium 瀏覽器,并在瀏覽器中創建一個新頁面。我們還會根據頁面內容和指定選項(如路徑和格式)生成 PDF,生成完成后關閉瀏覽器并釋放資源。
PDFKit 是 JavaScript 生態系統中最古老和最成熟的 PDF庫 之一。目前仍得到良好維護并定期更新。該庫通常使用 Node.js 在服務器端環境中創建和操作 PDF 文檔。它允許您通過定義每個頁面的內容、布局和格式來以程序方式生成PDF文件。
PDFKit 提供了用于 PDF 文檔生成的高級 API,并支持各種功能,使其成為創建自定義 PDF 的多功能工具。作為 PDFKit 的包裝器,已開發出多個 PDF 庫,支持自定義字體和圖像嵌入。
讓我們來快速初始化一個 PDFKit 項目:
nvm use 20.6.1
mkdir pdfkit-demo
cd pdfkit-demo
npm init -y
npm install pdfkit
touch index.js
在 index.js 中添加如下代碼:
import fs from 'node:fs';
import PDFDocument from 'pdfkit';
const doc = new PDFDocument();
const stream = fs.createWriteStream('example.pdf');
doc.pipe(stream);
doc.fontSize(12).text('Hello, PDFKit!', { align: 'center' });
doc.end();
stream.on('finish', () => {
console.log('success');
});
執行 node index.js 后,可以看到 PDF 可以生成生成,并觸發 finish 事件的回調函數執行,打印出了 success 。
jsPDF 是一個流行的 JavaScript PDF 生成器,允許用戶動態在 Web 瀏覽器中生成 PDF 文件。這個庫維護良好,穩定易用,并且有豐富的文檔。
jsPDF 在客戶端操作,非常適合在 Web 應用程序中生成 PDF ,無需在服務器端生成。它可以修改現有布局,并允許用戶通過自定義來控制他們的 PDF。還可以用來編輯現有的 PDF 文檔或從頭創建一個,包括圖像、表格和形狀等內容。
示例中使用官方提供的 CDN 地址 https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<style>
body {
display: grid;
place-items: center;
margin: 0;
background-color: #ccc;
min-height: 100vh;
}
</style>
<h1>Hello, jsPDF!</h1>
<script>
document.addEventListener("DOMContentLoaded", function () {
const pdf = new window.jsPDF();
const element = document.body;
pdf.html(element, {
callback: function (pdf) {
// Save the PDF to a file or display it
pdf.save("output.pdf");
},
});
});
</script>
</body>
</html>
文檔地址:http://raw.githack.com/MrRio/jsPDF/master/docs/index.html
為便于大家參考,下面總結了 Puppeteer、jsPDF 和 PDFKit 庫在 PDF 生成、文件大小、瀏覽器集成和社區支持方面的比較:
當為 HTML 轉 PDF 需求選擇實現方案時,可以參考以上實現方案。如果你想從頭開始生成 PDF,PDFKit 可能是你最好的選擇。要通過 HTML 或者 SVG 內容快速轉換為 PDF,jsPDF 可能更合適。對應網頁渲染和交互式內容,強烈建議你選擇 Puppeteer。
最后,方案選擇在很大程度上還取決于你的項目類型、規范及開發者個人喜好。
如果文章對你有幫助,歡迎關注和轉發,感謝你的支持!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。