any-block/obsidian-any-block

[docs、feat] Export problem, export to pdf temporary solution (导出问题，导出到pdf的临时方案)

Closed this issue · 4 comments

LincZero commented 
          顺便还有一个问题，有任何办法单独导出渲染的片段为图片吗，只能在ob里面看到渲染图。各种格式导出，不能渲染出来。除了一个share note可以正常预览

Originally posted by @jotithan425 in #61 (comment)

LincZero commented
  1. Web solutions. As you can see, AnyBlock's online display and tutorial sites are perfectly compatible with the plugin, and those with the ability to create blogs are given priority
  2. pdf export problem. There is currently no good support, and while AnyBlock doesn't render too badly without plugins, it still has an impact (Scroll down. There are some ways)
  3. Some AnyBlock blocks export images separately. There is no good support, if it is markmap or other such as SVG, seems can be done with the help of other plug-ins, such as: https://forum-zh.obsidian.md/t/topic/37790. Maybe later. No plans for a while

Others:

pdf compatibility issues. Tabs such as list2tab, which are interactive, may need to be rendered flat in a non-web environment. Fail to do...

  1. 网页方案。可以看到 AnyBlock 的在线展示与教程网站是完美兼容该插件的，有能力创建博客的可以优先使用该方案
  2. pdf导出问题。目前并没有较好的支持，虽然 AnyBlock 在没有插件的情况下渲染不算太糟，但还是有影响 (往下翻，有一些方法)
  3. 部分AnyBlock块 单独导出图片。目前没有较好的支持，如果是 markmap 或其他 svg 之类的，似乎可以借助其他插件做到，例如：https://forum-zh.obsidian.md/t/topic/37790 。可能往后会做，短时间没计划

其他：

pdf兼容问题。像 list2tab 这种标签页，带交互的，在非网页环境下可能需要另行渲染成扁平的样子。没做

jotithan425 commented

okok，慢慢来吧，现在已经很强大了

LincZero commented

发现一个可以暂时导出的方法：

AnyBlock 除了扩展的六种选择器外，传统的代码块选择器也能用。而使用传统的代码选择器声明的anyblock，是可以导出pdf的，如下：

（图左源码，右pdf（而且刚好被分页截断了））

图片

而扩展出来的那六种选择器，暂时不支持在pdf导出中使用。后面我看一下有没有能够实现的方法

关于八种块选择器语法的说明见：https://linczero.github.io/MdNote_Public/ProductDoc/AnyBlock/docs/zh/03.%20%E9%80%89%E6%8B%A9%E5%99%A8.html

Found a way to temporarily export:

In addition to AnyBlock's extended six selectors, traditional code block selectors are also available. anyblock, which is declared by the traditional code selector, can be exported to pdf, as shown in the figure:

(Figure left source, right pdf (and just be paginated truncated))

The expanded six selectors are not currently supported for use in pdf exports. Let me see if there's a way to do that.

About eight blocks selector syntax description see: https://linczero.github.io/MdNote_Public/ProductDoc/AnyBlock/docs/en/03.%20Selector.html

LincZero commented

(1) 手动方案

见上一层中的描述

缺点：一来需要手动去用回代码块，二来并不符合AnyBlock ”不引入特殊语法，只使用md语法“ 的原则

那有没有自动化的方案呢？见下

(2) 文件转换方案

我能想到的最粗暴的一种解决方法是，提供一个命令，在导出前使用该命令：

会使用 " ```anyblock......``` " 的代码围栏，将所有 anyblock 块包起来（修改的源md内容，或生成一个md备份），这个时候再导出，就没有问题了

这种方式优点是我不需要过多专研ObsidianAPI的一些生命机制和流程，节省开发时长和我我狗命。
缺点是粗暴不优雅，导出前需要生成一份被修改过的 .md，再到处那个被修改的 .md

(3) 合理的解决方案

通过正规的程序方式，用正规的流程去解决。应该是可以的，但我暂时没有思路。

dvjs 的 inline 语句好像能做到，有空我去参考一下那边的代码。或者我去开发论坛那边提问一下……再说

(4) 差异化问题

不过导出pdf可能存在样式有细微变化

如果想要完整样式，还有一个解决方法：通过截图将anyblock渲染结果存为图片，然后使用图片替换掉原anyblock内容

这种方法也是可以实现的

  • 方案优点
    • 样式完整保留的优点
    • 另一个优点是这种策略的图应该不会被pdf分页所截断
  • 方案缺点
    • 不会被pdf截断也可能是缺点。如果渲染的是类似大表格的类型，可能更倾向于分页而不是缩小的预期结果
    • pdf编辑中缩放等，图片有可能导致清晰度较低（其实可以使用plantuml图表来模拟效果，因为这个就是以图片方式渲染的）
    • 图片方案可能带来额外的空间开销

最后

要用哪种方法还在思考中，而且这个功能估计没有那么快实装，特别是如果采用更复杂的解决策略的话。

有需要的可以先试一下方案一，看看效果。如果效果比较差的话可能只能用方案4了

另外，对该功能有强烈需求的，欢迎在该层的emoji中点个 ”like“

(1) Manual scheme

See the description in the previous layer

Disadvantages: First, you need to manually use the code block, and second, it does not comply with AnyBlock's principle of "no special syntax is introduced, only md syntax is used"

Is there an automated solution? Vide infra

(2) File conversion scheme

The crudest solution I can think of is to provide a command to use before exporting:

Will use "anyblock...... "Code fence, wrap all anyblock blocks (modify the source md content, or generate an md backup), and then export, there is no problem

The advantage of this way is that I do not need to study some life mechanisms and processes of ObsidianAPI too much, saving development time and my own life.
The disadvantage is that it is rude and not elegant, and it needs to generate a modified '.md 'before exporting, and then the modified'.md 'everywhere

(3) Reasonable solution

Through the formal procedural way, with the formal process to solve. It should be possible, but I have no idea at the moment.

The dvjs inline statement seems to be able to do that, and I'll refer to the code there sometime. Or I can go to the development forum and ask a question... besides

(4) Differentiation

However, there may be slight changes in the style of the exported pdf

If you want the full style, there is another solution: save the anyblock rendering result as an image by taking a screenshot, and then replace the original anyblock content with the image

This approach is also possible

  • Program advantages
  • Advantages of intact style retention
  • Another advantage is that graphs with this strategy should not be truncated by pdf pagination
  • Scheme defects
  • Not truncated by pdf may also be a disadvantage. If you are rendering a type similar to a large table, you may prefer pagination to the reduced expected result
  • pdf editing, scaling, etc., pictures may lead to lower clarity (in fact, you can use plantuml charts to simulate the effect, because this is rendered as a picture)
  • Image schemes may incur additional space overhead

Finally

It's still a work in progress, and it's not likely to be implemented quickly, especially if more complex solutions are adopted.

If you need to, you can try plan one first to see the effect. If the results are not good, you may have to use plan 4

In addition, those who have a strong demand for this function are welcome to click "like" in the emoji on this layer.