自從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
大家是怎么搞定這樣的功能的呢?
歡迎試用多提寶貴意見!