This topic created in 3046 days ago, the information mentioned may be changed or developed.
自从 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 友们是怎么搞定这样的功能的呢？ 欢迎试用多提宝贵意见!
Supplement 1 · Jan 5, 2018
最终我没有用 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;
}
```
代码如下:
```
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;
}
```
 |
1
tinyhill Jan 5, 2018
用 headless chrome
|
 |
3
xiubin Jan 6, 2018
大佬啊，我看到你一次就想给你说一回，我的审美真的和你不一样啊~
而且各大论坛都有关注你~ 咱能不能把做技术的一小嘬时间用来写 UI 啊~ |
Select Language