🔥搞了整整一天，我为魔改的绘图工具增加了导出PDF的功能🔥

前言

之前闲暇之余我基于 drawio 魔改了一个绘图工具------女朋友不想开Processon会员，我魔改了一个无限制的在线绘图软件，然后在小某书宣传了一波。

🌟体验地址🌟

也是有不少人用到了我们这个工具，刚看了一下注册用户已经有 1400+ 了，哈哈，小骄傲了一下，这也是我第一次做东西有这么多人用。

随之而来的是一些用户使用上的一些反馈，比如说已经有两位用户反馈不能导出 PDF 的问题。

那既然有用户用咱们的东西，还是尽量能完善就完善。

开始踩坑

首先，我们现在看看导出 PDF 它会做些什么。

看起来是调用了 EXPORT_URL ，这个 URL 在下面的地方配置：

默认不配置的话就是下面这样

点击导出就直接跳转 REPLACE_WITH_YOUR_IMAGE_SERVER ，所以点击就报错 404 了。

那么看起来这个导出是一个独立的服务，然后我就在 drawio 相关的仓库里面找呀找，终于让我找到了他做导出的仓库地址。

大致看了一下它的代码，它是基于 express+puppeteer 去做导出的。看到 puppeteer 的时候其实我的心已经凉了半截，很多年前部署过一次，也搞了很久。

不过那也没办法，再难也得上，在服务器上把它的仓库拉下来。安装依赖的时候发现需要 node18 ，服务器版本上是 node16 。

然后我就去升级 node 版本，用 nvm 装了一个 node18 之后，执行 node -v ，发现报错：

vbnet 复制代码

node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)

我就咨询了一下 gpt

第一点更新操作系统不太现实，而且可能有很多坑；第二点用老版本也不行；第三点也不行因为这是操作系统少了依赖；第四点，使用 docker ，听起来很可行， docker 就不是为了解决这种环境不一致的问题的吗？

然后我又找到了这个导出服务对应的docker部署方式，试了一下，果然不行。

仔细看了一下之后，发现里面的 dockerfile 会去下载一些 google 相关的包，我的服务器又不通外网，肯定是下载不下来。

那无奈，就只能自己写了个 docker 脚本来试试：

arduino 复制代码

FROM node:18.20.2


COPY . . 

# 设置淘宝镜像源并禁用SSL证书验证
RUN npm config set registry http://registry.npm.taobao.org/ \
    && npm config set strict-ssl false

RUN npm install

CMD ["npm", "start"]

然后执行 docker build -t export-app . 来构建镜像，构建完成之后，使用 docker run -p 8000:8000 export-app 来启动容器，启动之后，调用一下，果不其然又报错了

vbnet 复制代码

e Error: Failed to launch the browser process!

这个时候查看了 puppeteer 的踩坑文档，发现也是少依赖导致的。 FROM node:18.20.2 这个基础镜像的操作系统是 Debian ，所以需要另外安装一些包，完整的 dockerfile 如下：

bash 复制代码

FROM node:18.20.2

# 更新apt软件包索引
RUN apt update

# 安装常用的系统软件包
RUN apt install -y \
    ca-certificates \
    fonts-liberation \
    libasound2 \
    libatk-bridge2.0-0 \
    libatk1.0-0 \
    libc6 \
    libcairo2 \
    libcups2 \
    libdbus-1-3 \
    libexpat1 \
    libfontconfig1 \
    libgbm1 \
    libgcc1 \
    libglib2.0-0 \
    libgtk-3-0 \
    libnspr4 \
    libnss3 \
    libpango-1.0-0 \
    libpangocairo-1.0-0 \
    libstdc++6 \
    libx11-6 \
    libx11-xcb1 \
    libxcb1 \
    libxcomposite1 \
    libxcursor1 \
    libxdamage1 \
    libxext6 \
    libxfixes3 \
    libxi6 \
    libxrandr2 \
    libxrender1 \
    libxss1 


COPY . . 

# 设置淘宝镜像源并禁用SSL证书验证
RUN npm config set registry http://registry.npm.taobao.org/ \
    && npm config set strict-ssl false

RUN npm install

CMD ["npm", "start"]

调用一下，大功告成，下面来简单介绍一下如何调用。

如何调用

首先容器里的 node 服务启动的是 8000 端口，我们启动容器的时候已经把宿主机的 8000 端口映射到容器的 8000 端口。所以我们只需要访问宿主机的 8000 端口，这个时候就需要在 nginx 这里配置一下转发：

ini 复制代码

location /node {
        proxy_pass http://localhost:8000;
        proxy_connect_timeout 120s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
}

然后这个导出服务的路由配置如下：

访问任何的路径都可以，也就是说我们可以访问 https://hostname/node/export 来执行导出。

中文乱码

后续小伙伴体验之后，又给我提了一个 bug ，导出的 pdf 中文乱码

比如说这是我们绘制的流程图

导出来的 pdf 确是这样的

如果有搞过相关的导出需求的同学应该知道，是因为没有相关的字体文件所导致的。一般我们的宿主机上都会有字体文件，但是容器是十分精简的，可能就没有这些字体文件。

所以我们需要把宿主机的字体文件挂载一下到容器上：

命令如下：

javascript 复制代码

docker run -d -p 8000:8000 -v /usr/share/fonts:/usr/share/fonts export-app

-v /usr/share/fonts:/usr/share/fonts 这句话的意思就是把宿主机的 /usr/share/fonts 目录与容器的 /usr/share/fonts 目录关联起来。

重启容器之后，再次导出，就没问题了

最后

其实我搞这个的时候，远没有文章写的那么顺利，中间踩过的坑有很多很多，各种报错。不过只从我看到它需要 node18 之后，我就把解决的思路放到容器化上。中间我也去找了一下有没有现成的镜像，无奈没找到我才选择自己构建镜像。

如果我之前没有接触过容器化技术的话，那么这个东西想必我是搞不定了。所以，你觉得前端有必要接触一些后端或者运维的知识吗？欢迎评论区聊聊～

以上就是本文的全部内容，如果你觉得有意思的话，点点关注点点赞吧～