当前位置:

微信文章网页打印优化

skai 2024-01-13 3381

为方便收集、打印或者复制微信公众号文章,可以利用客户端浏览器工具适当调整页面样式。
1、复制下方的代码备用。
2、手机微信分享过平台的文章后,在电脑端微信指定系统浏览器打开需要收集的文章,从上至下滑动浏览完页面,这样全部的图片元素都会载入显示出来。
3、按键盘F12打开“开发人员工具”,在“控制台”里粘贴代码,按回车。
4、页面更新后,还可以先拉动浏览器页面宽度,或按Ctrl+ - 0 +缩放页面。
5、按Ctrl+P呼出浏览器的打印界面,选择另存为PDF,这时自行调节页面设置和缩放。

根据需要可重复最后两步以达到合适的打印字体大小。

微信公众号文章界面微调优化代码如下:

// 复制代码,粘贴到浏览器F12“开发人员工具-控制台”,
// 按回车,页面格式会发生变化。
$('#js_pc_qr_code').remove();
$('#content_bottom_area').remove();
$('.rich_media_tool_area').remove();
$('.rich_media_area_extra').remove();
$('.mp_profile_iframe_wrp').remove();
$('p').css("margin-bottom","5px");
$('section').css("margin-bottom","5px");
$('body').css("background-color","#fff");
$('.wxw-img').css("max-width","36% !important");
$('.wxw-img').css("max-height","30% !important");
$('.rich_media_meta_list').css("margin-bottom","0");
$('.rich_media_area_primary_inner').css("max-width","100%");
$('#meta_content').after('<p>'+window.location.href+'</p>');
// 最后两个分别调整限制图片宽36%与高30%,你可按需调整。
// 例如将上值改成40%和40%,刷新文章页面重新1-5步即可。
// 结束,双斜杠开头的行都是注释,均可删除

下面是完整的图示操作:

1、复制代码备用


01.png

2、打开微信的文章

3、滑动阅读文章到底,这样所有图片都能显示完整了。

4、按F12 启动开发人员工具,并如图示操作顺序。

5、页面随即调整完毕,可以打印、保存PDF或者直接复制。

6、浏览器会保存PDF到下载文件夹、


7、保存成功的PDF格式文档一览。

8、直接复制到文档的效果也很好,比如老师布置的作业资料。

9、最后提示:代码中有两个关于页面图片宽度与高度的限制数值,你可以根据需要自己调整。