Marknote Web 页面导出 PDF 方案

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

这两天有点时间研究了一下前端直接导出pdf的方案。结果发现是一个大坑啊,这篇文章http://blog.stahlmandesign.com/export-html-to-pdf-how-hard-can-it-be/解释得比较详细了。
没有完美的方案。
绕道走,调浏览器的打印功能简单的实现了一下,参考stackflow上的一个答案,代码如下:

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; 
} 

在Chrome和Firefox上测试通过,基本上可用了。目前已知的问题:打印窗口不等待图片加载,所以有时候图片出不来。
发了一个版本,在这里:
https://marknoteapp.com
大家是怎么搞定这样的功能的呢?
欢迎试用多提宝贵意见!

推荐阅读更多精彩内容