gitbook pdf export error

[Anudorannador]

related link: GitbookIO/gitbook#2154

[miao1007]

The reason for base64 encoding is the generated SVG image may break the balance of XML tag, and it will cause tags below the SVG image failed to be rendered.

I'm trying to generate a separate png file.

[miao1007]

我又提交了一份，暂时没有更新到npm，你试下直接换里面的文件，然后看看是否ok。这个简直天坑，nodejs的生态太惨了

[Anudorannador]

I tried, OK & 👍 steps：

1. clone repo: git clone https://github.com/miao1007/gitbook-plugin-mermaid-cli;

2. as the doc: sudo npm link --unsafe-perm and npm link gitbook-plugin-mermaid in the book's folder;

3. cd to my book's folder and then remove node_modules and _book;

4. gitbook install;

5. gitbook pdf ./ ../output.pdf

Is that right ?

BTW, 我是个写 C 的，这玩意太难了。。。。

[Anudorannador]

现在能生成PDF，但是浏览器打不开了，我不知道为什么 github 上传不了图片。。。。

F12 看了下，貌似最后生成的图片：

<img src="data"image/svgFileDir_+xml;base ...">

是不是 svgFileDir 这个地方有问题？

[miao1007]

首先我不太清楚为什么要做成pdf，如果是对内使用的话，pdf的可搜索性还是比较差的。而如果你把它当成对外交付文档，格式又不如word正式。

我是写java的，也搞不定这个问题，搞不定是因为nodejs下的确没有什么好代码与文档（而且gitbook应该是死了），一旦深入问题就要翻源码，太耗费时间了。如果导出为pdf，就涉及到比较复杂的排版问题，我个人更推荐用这里的方案 https://program-think.blogspot.com/2015/03/blog-sync.html

如果你仍然希望用我这里的方案，可以试试把修改mermaid输出格式从SVG改为PNG，这样就规避问题了。

[miao1007]

再试下，我这边已经生成了，但是

1. 复杂的图像显示不清晰 -> 这个要改mermaid的方案 see Is there any way to set dpi for png mermaidjs/mermaid.cli#51
2. 而且pdf的体积很大 -> 这个不是我导出导致的，通过分析，png加起来只有100多K。目测是生成了很多重复文件
3. 中文字体很丑，可能需要修改gitbook与calibre的配置

更新：
再试了一下，导出mobi与epub非常完美，而且体积只有200k，可以在Kindle上使用，这点很有价值。

[Anudorannador]

情况特殊，一言难尽……平衡各方面，选择 gitbook。pdf 确实对外使用，我之前都是用 LaTeX 的。总之，先谢谢了 :)

[shixuguo]

@miao1007 你把我的问题关闭了然后归到了这里.
这是我的原问题:
mermaidjs/mermaid.cli#51

我简单看了一下似乎不是一回事啊,
而且我是想在pandoc中使用的(参考这个 https://github.com/raghur/mermaid-filter)
你这个会支持pandoc么?

[miao1007]

这个太折腾了，不支持。我还是没有搞懂你这里的需求，如果要用pandoc，需要一种类似typora的方案，先把gitbook转为ast才可以

[shixuguo]

我原问题的需求就是利用mermaid-cli转png的时候能够指定dpi

对于这个问题你怎么看 @miao1007

[Anudorannador]

我原问题的需求就是利用mermaid-cli转png的时候能够指定dpi

对于这个问题你怎么看 @miao1007

我翻了下 gitbook 的源代码，貌似在其 lib/utils/images.js 文件的第10行左右：

  return command.spawn('svgexport', [source, dest])

只传了两个参数，第三个参数使用默认值，如果要清晰一点的话，就要自己传个参数，比如 x1.5 之类的，具体参数看 svgexport github 文档。

所以有个方法就是自己 clone gitbook 的代码，改完后用 yarn 之类的编译、link ... 具体操作我也没试过。

[miao1007]

@miao1007 你把我的问题关闭了然后归到了这里.

我终于看明白你的提问了，首先我是没有权力关闭其它项目问题的，我只能关闭本项目里的问题。由于我这边讨论导出涉及到你的精度问题，所以也引进来了你提出的单供大家一起讨论。

回到这个精度的位置，我们从源码可以看出，它是用screenshot实现的，然后参考API文档，可以发现quality字段是不生效的。

page.screenshot({ path: output, clip, omitBackground: backgroundColor === 'transparent' });

在不修改mermaid.cli源码的前提下，基本不可能实现。

GitBook导出png的问题
pdf本身是支持嵌入svg，这个是Gitbook的设计思路问题，非要用svg2png，而且基本没人维护了，所以pdf导出高精度的文件只能自己魔改源码了。

Mermaid.cli导出png的精度问题
受限于Chrome的screenshot的能力，此问题也是无解，我个人建议只使用它的svg功能。目前做的比较好是Typora导出，但是它本身就是基于浏览器的。

pandoc下的导出
我个人建议还是先导出svg，然后在调用pandoc下的filter进行转换，不要趟 Node的坑了。我这里暂时不支持Pandoc。