自从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
大家是怎么搞定这样的功能的呢？
欢迎试用多提宝贵意见!
网友评论