Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zh-g opened this issue Aug 20, 2019 · 3 comments
Open

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

zh-g opened this issue Aug 20, 2019 · 3 comments

Comments

@zh-g
Copy link

zh-g commented Aug 20, 2019

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

  • 代码块如果一行较长,需要折行,或者把变量名改短,让一行的长度不会超过pdf渲染出的长度
  • 有些list项,在Typora里没折行,在pdf里折行,有时为了追求好看也会去删减文字

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

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

@blinkfox
Copy link
Owner

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

#write {
    max-width: 690px;
    margin: 0 auto;
    padding: 20px 30px 100px;
}

@zh-g
Copy link
Author

zh-g commented Aug 21, 2019

@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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants