blinkfox / typora-vue-theme

This is a typora theme inspired by Vue document style. 一个类似于 Vue 文档风格的 Typora Markdown 编辑器主题。
https://theme.typora.io/theme/Vue/
Apache License 2.0
931 stars 180 forks source link

Export的pdf与原始文档渲染不一致 #23

Open zh-g opened 5 years ago

zh-g commented 5 years ago

export成pdf之后,一行能显示的内容比Typora自身渲染的一行要少,导致要做这些调整才能显得好看:

调整了 vue.css 里面 @media print 部分的内容,把 html font-size 改成 12px 没有效果。

不太确定是不是问题,如果不是就close掉,谢谢先。

blinkfox commented 5 years ago

@zh-g 我查了一下,是 Typora 中的渲染的最大宽度和导出的 pdf 的文件内容宽度不同引起的,导出的 pdf 的宽度会窄一些。如果你想要保证大致情况一致的话,可以尝试自己改下 css 样式,将 #write 的最大宽度设置为 690px 即可。

#write {
    max-width: 690px;
    margin: 0 auto;
    padding: 20px 30px 100px;
}
zh-g commented 5 years ago

@blinkfox 多谢多谢。不过这样改的话,实际上是通过减小Typora的渲染宽度来达到一致,无论是书写还是输出PDF,每行的空间变得更捉襟见肘了。

这里 给出了一种方法,强行把PDF页面调整成A3大小,再控制内容的max-width,可以做到一致并且一行足够宽,但是问题也比较多:A3不符合一般的文档页大小惯例;PDF阅读器按A4合适的窗口大小使用时会出现滚动条;页面留边也比较大。

最后我调来调去改成这样了,勉强达到目的。虽然正文和代码块都还有些微差异,但也能接受了。

@media print {
    @page :left {
        margin: 50pt -5pt;
    }
    @page :right {
        margin: 50pt -5pt;
    }
    body {
        font-size: 9pt;
    }

    table,
    blockquote,
    pre {
        page-break-inside: avoid;
    }

    pre {
        word-wrap: break-word;
    }
}
suiyun39 commented 5 years ago

一般情况下,pdf都是A4大小吧