首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

Marknote Web 页面导出 PDF 方案

  •  
  •   marknote · 2018-01-05 09:55:34 +08:00 · 1212 次点击
    这是一个创建于 530 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自从 web 版 marknote 上线后,好几个同学呼唤在页面直接导出 pdf 的功能。虽然 mac 和 ios 版导出 pdf 已经完美了,可是不是所有的用户都有 ios 和 mac。再说 web 版所有功能是免费的,大家都喜欢 :)

    这两天有点时间研究了一下前端直接导出 pdf 的方案。结果发现是一个大坑啊,这篇文章 http://blog.stahlmandesign.com/export-html-to-pdf-how-hard-can-it-be/解释得比较详细了。 没有完美的方案。 绕道走,调浏览器的打印功能简单的实现了一下,在 Chrome 和 Firefox 上测试通过,基本上可用了。目前已知的问题:打印窗口不等待图片加载,所以有时候图片出不来。 发了一个版本,在这里: https://marknoteapp.com V 友们是怎么搞定这样的功能的呢? 欢迎试用多提宝贵意见!

    第 1 条附言  ·  2018-01-05 10:35:01 +08:00
    最终我没有用 jsPDF,也没有用 html2canvas,用的是这个方案: https://stackoverflow.com/questions/21379605/printing-div-content-with-css-applied
    代码如下:
    ```
    function PrintElem(elem)
    {
    var css =`...`; //此处放入打印 CSS 样式
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title + '</title>');
    mywindow.document.write('<style>'+css+'</style>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/
    //setTimeout(function(){mywindow.print();},1000);
    mywindow.print();
    mywindow.close();

    return true;
    }
    ```
    6 回复  |  直到 2018-01-06 15:06:34 +08:00
        1
    tinyhill   2018-01-05 22:30:07 +08:00
    用 headless chrome
        2
    marknote   2018-01-06 09:22:48 +08:00
    @tinyhill 谢谢... 不过,我是想实现一个纯前端的方案... 最终用户不一定安装了 chrome ...
        3
    xiubin   2018-01-06 11:24:11 +08:00
    大佬啊,我看到你一次就想给你说一回,我的审美真的和你不一样啊~
    而且各大论坛都有关注你~
    咱能不能把做技术的一小嘬时间用来写 UI 啊~
        4
    marknote   2018-01-06 14:54:30 +08:00 via iPhone
    @xiubin 我觉得现在已经很漂亮了。至少比 ulysses 强了很多,嘿嘿
    欢迎你将自己的想法可视化出来 :)
        5
    xiubin   2018-01-06 14:57:17 +08:00
    @marknote #4 你在简书上也是这么给我说的~
        6
    marknote   2018-01-06 15:06:34 +08:00 via iPhone
    @xiubin 这里说的多了一条好不好 😄
    界面每次都在改进哦
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2624 人在线   最高记录 5043   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 19ms · UTC 12:59 · PVG 20:59 · LAX 05:59 · JFK 08:59
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1