將JavaScript代碼轉換為漂亮的SVG流程圖-js2flowchart

言

js2flowchart 是一個可視化庫，可將任何JavaScript代碼轉換為漂亮的SVG流程圖。你可以輕松地利用它學習其他代碼、設計你的代碼、重構代碼、解釋代碼。這樣一個強大的神器，真的值得你擁有，看下面截圖就知道了，有沒有很強大。

Github

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的特性以及適用場景（來自官網翻譯）

js2flowchart獲取您的JS代碼并返回SVG流程圖，適用于客戶端/服務器，支持ES6。

主要特點：

定義抽象級別以僅渲染導入/導出，類/函數名稱，函數依賴性以逐步學習/解釋代碼。
自定義抽象級別支持創建自己的抽象級別
表示生成器，以生成不同抽象級別的SVG列表
定義流樹修改器以映射眾所周知的API，例如[] .map，[]。forEach，[] .filter到方案上的循環結構等。
銷毀修飾符，用于在方案上用一個形狀替換代碼塊
自定義流樹修改器支持創建自己的流修改器
流樹忽略過濾器完全省略一些代碼節點，如日志行
聚焦節點或整個代碼邏輯分支突出顯示方案的重要部分
模糊節點或整個代碼邏輯分支以隱藏不太重要的東西
定義的樣式主題支持選擇您喜歡的樣式
自定義主題支持創建自己的主題，更好地適合您的上下文顏色
自定義顏色和樣式支持提供方便的API來更改特定樣式而無需樣板

用例場景：

通過流程圖解釋/記錄您的代碼
通過視覺理解學習其他代碼
為有效JS語法簡單描述的任何進程創建流程圖

以上所有功能可以直接到github上詳細了解，用法太多，這里就不在介紹了！

vscode擴展

這么強大的東西，有人肯定說如果在開發的時候實時看到流程圖有助于理解代碼，官網提供了插件（我在最新版中測試失效了，不知道是否是我使用的有問題還是插件本身的問題），如果感興趣的可以到擴展商店搜索code-flowchart。如果測試成功，歡迎到評論區分享。以下是我vscode版本和官網的插件使用截圖。

如果利用好這個插件，可以開發出Chrome插件，以及其他JavaScript編輯器或者IDEA的插件，由于官方github已經幾個月沒更新了，所以還不知道未來會不會支持！

總結

js2flowchart是一個比較實用的Javascript插件，可以用來做很多事情，不管是自己寫代碼。還是閱讀別人的代碼，都無疑是一大助力，能夠幫助我們提升我們的代碼能力，更容易的閱讀代碼，這樣學習起來就快了，希望對你有所幫助！如果有什么好的建議，也可以到評論區分享！

者開源了一個Web思維導圖，在做導出為圖片的功能時走了挺多彎路，所以通過本文來記錄一下。

思維導圖的節點和連線都是通過 svg渲染的，作為一個純 js 庫，我們不考慮通過后端來實現，所以只能思考如何通過純前端的方式來實現將svg或html轉換為圖片。

使用img標簽結合canvas導出

我們都知道 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 轉換為圖片就基本沒啥問題了。

處理存在foreignObject標簽的情況

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急速瀏覽器，運行都是正常的。

踩坑記錄

前面介紹的是筆者目前采用的方案，看著實現其實非常簡單，但是過程漫長且坎坷，接下來，開始我的表演。

foreignObject標簽內容在firefox瀏覽器上無法顯示

對于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瀏覽器占有率并不高，于是這個問題就擱淺了。

使用img結合canvas導出圖片里foreignObject標簽內容為空

chrome瀏覽器雖然渲染是正常的：

但是使用前面的方式導出時foreignObject標簽內容卻是跟在firefox瀏覽器里顯示一樣是空的：

firefox能忍這個不能忍，于是嘗試使用一些將html轉換為圖片的庫。

使用html2canvas、dom-to-image等庫

使用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，雖然它存在一定問題，但至少不是完全空的。

解決foreignObject標簽內容在firefox瀏覽器上無法顯示的問題

用的人多了，這個問題又有人提了出來，于是筆者又嘗試看看能不能解決，之前一直認為是firefox瀏覽器的問題，畢竟在chrome和opera上都是正常的，這一次就想會不會是svgjs庫的問題，于是就去搜它的issue，沒想到，還真的搜出來了issue，大意就是因為通過SVG方法轉換的dom節點是在svg的命名空間下，也就是使用document.createElementNS方法創建的，導致部分瀏覽器渲染不出來，歸根結底，這還是不同瀏覽器對于規范的不同實現導致的：

你說chrome很強吧，確實，但是無形中它阻止了問題的暴露。

知道了原因，那么修改也很簡單了，只要將SVG方法第二個參數設為true即可，或者自己來創建節點也可以：

foreignObject.add(document.createElemnt('div'))

果然，在firefox瀏覽器上正常渲染了。

解決img結合canvas導出圖片為空的問題

解決了在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 及優缺點
jsPDF 及優缺點
PDFKit 及優缺點
Puppeteer vs jsPDF vs PDFKit 功能對比

1.Puppeteer

1.1.使用 Puppeteer 生成 PDF

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，生成完成后關閉瀏覽器并釋放資源。

1.2.優點

您可以完全控制要在 PDF 中包含網頁的哪些部分。您可以指定具體的元素、部分或整個頁面
Puppeteer 提供了自定義選項，如指定頁面大小、邊距、頁眉和頁腳，使您可以根據特定需求定制 PDF 布局
Puppeteer 可以捕捉 PDF 中的交互元素，如超鏈接和表單字段，適用于生成交互式 PDF 文件。

1.3.缺點

使用 Puppeteer 生成的 PDF 有時可能比使用類似庫生成的PDF要大。這會影響下載時間和存儲成本。
使用 Puppeteer 渲染復雜或大型網頁可能會消耗資源，導致PDF生成變慢和內存使用增加。

2.PDFKit

PDFKit 是 JavaScript 生態系統中最古老和最成熟的 PDF庫之一。目前仍得到良好維護并定期更新。該庫通常使用 Node.js 在服務器端環境中創建和操作 PDF 文檔。它允許您通過定義每個頁面的內容、布局和格式來以程序方式生成PDF文件。

PDFKit 提供了用于 PDF 文檔生成的高級 API，并支持各種功能，使其成為創建自定義 PDF 的多功能工具。作為 PDFKit 的包裝器，已開發出多個 PDF 庫，支持自定義字體和圖像嵌入。

2.1.使用 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 。

2.2.優點

由于它是開源的，并由社區積極維護，PDFkit 可以不斷改進和更新
PDFKit 可對 PDF 文檔的內容、布局和格式進行精細控制。您可以根據自己的特定需求創建高度定制的 PDF 文檔
PDFKit 是根據用戶請求、數據或其他服務器端進程動態生成 PDF 的絕佳選擇

2.3.缺點

創建具有高級布局和功能的復雜 PDF 可能具有挑戰性，可能需要充分了解庫的 API
對于新手來說，PDFKit 的學習曲線可能比更直接的 HTML 到 PDF 轉換工具更陡峭，因為它需要對文檔結構進行更多的手動控制

3.jsPDF

jsPDF 是一個流行的 JavaScript PDF 生成器，允許用戶動態在 Web 瀏覽器中生成 PDF 文件。這個庫維護良好，穩定易用，并且有豐富的文檔。

jsPDF 在客戶端操作，非常適合在 Web 應用程序中生成 PDF ，無需在服務器端生成。它可以修改現有布局，并允許用戶通過自定義來控制他們的 PDF。還可以用來編輯現有的 PDF 文檔或從頭創建一個，包括圖像、表格和形狀等內容。

3.1.使用 jsPDF 生成 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

3.2.優點

jsPDF 完全在客戶端（頁面）上運行，這使它成為在 Web 應用程序中生成 PDF 的一個很好的選擇，而無需外部服務
jsPDF 相對易于使用，尤其是對于基本的 PDF 生成任務。您只需幾行 JavaScript 代碼即可創建 PDF 文檔
由于 jsPDF 是一個 JavaScript 庫，它可以與 Web 應用程序無縫集成，并可以與其他 JavaScript 庫和框架一起使用

3.3.缺點

在客戶端生成 PDF 可能會耗費大量資源，尤其是大型或復雜文檔。這會影響瀏覽器性能或導致內存消耗問題
jsPDF 在現代 Web 瀏覽器中得到廣泛支持，但在舊的瀏覽器或具有較少 JavaScript 支持的環境中可能無法按預期工作
與 PDFKit 等服務器端 PDF 生成庫不同，jsPDF 具有有限的高級功能和能力。它可能不適用于復雜的PDF要求。

4.Puppeteer、jsPDF 和 PDFKit 功能比較

為便于大家參考，下面總結了 Puppeteer、jsPDF 和 PDFKit 庫在 PDF 生成、文件大小、瀏覽器集成和社區支持方面的比較：

5.結論

當為 HTML 轉 PDF 需求選擇實現方案時，可以參考以上實現方案。如果你想從頭開始生成 PDF，PDFKit 可能是你最好的選擇。要通過 HTML 或者 SVG 內容快速轉換為 PDF，jsPDF 可能更合適。對應網頁渲染和交互式內容，強烈建議你選擇 Puppeteer。

最后，方案選擇在很大程度上還取決于你的項目類型、規范及開發者個人喜好。

如果文章對你有幫助，歡迎關注和轉發，感謝你的支持！

在線咨詢

上一篇：Talos專家發現GoAhead Web服務器的RCE漏洞
下一篇：YouTube將默認使用HTML5替代Flash插件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商