简 介： 根据生成文档的需要，在CSDN上寻找一些介绍将MARKDOWN文档生成PDF博文。根据他们介绍的方法，测试打印的效果。特别是对于CSDN新增加的一些显示元素的清理，可以生成更加干净完整的PDF文档。
关键词： MarkDown，CSDN，PDF
§01 CSDN→PDF
一、CSDN的Markdown编辑器
CSDN的Markdown编辑器功能强大，可以包含丰富的内容（文字、公式、图片、动图、表格、流程图、程序代码、影片等等）。基于该编辑器，常用来：
- 编辑微信内容，然后再借助于 mdnice 外部套一个马甲生成微信推文；特别是CSDN允许直接图片粘贴存储图片。
- 记录平时实验研究工作，得益于Markdown文档可以很方便将实验程序、数据、图片以及动图进行记录。
- 记录智能车竞赛相关工作。CSDN博文审查非常迅速，而且7/24，便于及时整理同学们反馈意见对相关文档进行修改发布，几乎可以达到实时。
昨天在CSDN上整理发布的 智能车竞赛比赛规则（讨论稿） 快速根据同学们的反馈进行修改和迭代。
二、Markdown文件转成PDF
对于需要阅读文献，总是联网在CSDN网页上阅读还是不太方便。如果将其转换成PDF文档，进行打印和阅读则更加方便。
现在在CSDN的MarkDown编辑器只支持输出 Markdown文件和HTML文件，还不支持输出Word， PDF文件。如果将其Markdown文件下载，在第三方MD编辑器进行编辑和显示，会丢失一些CSDN的Markdown的特性，一些公式的显示，流程图的绘制等都会消失。
根据CSDN多篇博文介绍的方案，利用Chrome浏览器本身调试功能将Markdown文档生成PDF文件。下面是相关的博文：
三、PDF转换过程
这些方法都大体遵循相同的过程。
1、打开Chrome开发者工具
可以直接在Chome界面通过快捷键 ctrl+shift+I 打开Chrome的开发者工具界面。或者通过浏览器右上角（竖着三个点）菜单中的 更多工具 下的 开发者工具 开打开发者工具界面。如下图所示：
▲ 图1.3.1 打开Chrome开发者工具
2、在Console界面下粘贴代码
在开发者界面点击“console”页，在下面输入区粘贴代码。
（1）点击“Console”
▲ 图1.3.2 点击Console，然后粘贴代码
（2）粘贴代码
针对CSDN页面打印，粘贴下面的代码。
(function(){
'use strict';
var articleBox = $("div.article_content");
articleBox.removeAttr("style");
$("#btn-readmore").parent().remove();
$("#side").remove();
$("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove();
$(".nav_top_2011, #header, #navigator, #blogColumnPayAdvert, #toolBarBox, #csdn-copyright-footer").remove();
$(".csdn-side-toolbar,.template-box,.reward-user-box").remove();
$(".p4course_target, .comment-box, .recommend-box, #csdn-toolbar, #tool-box,#dmp_ad_58, .more-toolbox, .article-info-box, .btn-readmore").remove();
$("aside").remove();
$(".tool-box").remove();
$("main").css('display','content');
$("main").css('float','left');
$("#mainBox").css('width','90%');
$(".main_father.clearfix.d-flex.justify-content-center").css("width","90%"); //显示不全关键在于修改这里的width的比例
window.print(); // 修改成 90% 基本就可以显示全
})();
该代码的主要功能：
- 精简CSDN网页，只剩下中间部分显示区；
- 生成主显示区，设置显示区所占页面宽度；
- 打开页面打印显示对话框；
在TEASOFT命令环境下，输入“cdpdf”便可以在Windows的前切板中生成上述代码，只要在console输入区使用CTRL+V即可将代码输入。使用“回车”键，便可以执行上述代码。
3、页面打印对话框
代码执行后，便可以弹出打印预览对话框。在弹出的打印预览对话框中：
- 选择目标打印机：另存为PDF
- 设置页面与布局；
- 在更多设置中，定义纸张尺寸，工作表格页数以及边距；
- 更重要的是将“页眉和页脚”、“背景图形”都去掉。
▲ 图1.3.3 弹出的打印浏览对话框
选取“保存”便可以生成比较干净整洁的PDF文档了。
4、打印示例
1、开始打印输出
下面是使用 新CSDN文章转成PDF、打印(去空白) 的代码执行后打印输出的PDF文件内容。
▲ 图1.4.1 打印输出的PDF样例
可以看到在输出的PDF页面中，还存在一些我们不想要的内容：
- 文章收录专栏内容，在每一页的最上部；
- 专栏目录状态信息，在每一页的最下边；
- 页眉和页脚；
页面和页脚信息可以通过打印预览中设置去除之外，另外两个内容是原来代码中没有将CSDN显示页面中内容清理干净所造成的。
在粘贴的代码中增加了一下删除内容，便可以将打印页面中不需要的部分清除干净了。
#blogColumnPayAdvert, #toolBarBox, #csdn-copyright-footer"
2、最新打印输出
下面是最新的PDF生成页面，可以看到已经将文档页面做了最大的清理。
▲ 图1.4.2 最新的打印输出
§02 如何整理页面？
在CSDN显示页面中，存在着很多与博文无关的显示栏、工具栏。在利用Chrome页面打印之前需要讲这些与博文无关的信息去除。
▲ 图2.1 CSDN阅读页面
一、去除页面无关元素
1、去除方法
可以看到在前面粘贴代码的前半部分，存在大量 remove() 命令，用于去除页面中不需要的元素。
$("#btn-readmore").parent().remove();
$("#side").remove();
$("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove();
$(".nav_top_2011, #header, #navigator, #blogColumnPayAdvert, #toolBarBox, #csdn-copyright-footer").remove();
$(".csdn-side-toolbar,.template-box,.reward-user-box").remove();
$(".p4course_target, .comment-box, .recommend-box, #csdn-toolbar, #tool-box,#dmp_ad_58, .more-toolbox, .article-info-box, .btn-readmore").remove();
$("aside").remove();
$(".tool-box").remove();
因此只需要将需要去除元素的 id 放入上面代码中，便可以消除相关的现实元素。
2、如何定位元素ID ？
怎么能够定位页面元素的 id ？
（1）打开开发者工具
根据前面给出的方法，打开“开发者工具栏”。切换到对应的“Element”页面。
▲ 图2.1.1 打开开发者工具，切换到Element页面
（2）右键“检查”命令
在页面显示元素上，右键菜单中的“检查”命令，便可以同步在开发者工具栏中的“Element”显示对应的代码段。
▲ 图2.1.2 在显示元素上面点击右键，使用”检查“命令
在给出的代码段上面可以找到对应的该元素代码段的id字符串：id=toolBarBox。
▲ 图2.1.3 找到对应的ID字符串
将#toolBarBox加入到 前面粘贴代码的 remove()函数中的参数里面，便可以去除对应的页面元素了。
二、修改页面宽度
1、修改宽度比例
在前面粘贴代码中，修改“width”对应的宽度比例，可以调整内容在A4页面中的显示宽度。下面代码是将显示宽度比例修改为90%，内容显示比例合适。
(".main_father.clearfix.d-flex.justify-content-center").css("width","90%");
如果上面的width的比例修改为 100% ，那么页面就会出现右边内容超出有边界的内容。
2、修改页面高度
通过打印预览对话框设置打印页面边距。主要修改页面的头部和尾部的高度，可以调整每一页打印内容的高度。
▲ 图2.2.1 设置打印页边距
※ 内容总结 ※
根据生成文档的需要，在CSDN上寻找一些介绍将MARKDOWN文档生成PDF博文。根据他们介绍的方法，测试打印的效果。特别是对于CSDN新增加的一些显示元素的清理，可以生成更加干净完整的PDF文档。
◎ CDPDF程序
#下面是自动将打印脚本粘贴在Chrome的开发者工具中console命令区，并执行的程序。它在使用CTRL+SHIFT+I之后运行。
#!/usr/local/bin/python
# -*- coding: gbk -*-
#============================================================
# CDPDF.PY -- by Dr. ZhuoQing 2021-11-12
#
# Usage:
# Before using cdpdf, in Chrome, by CTRL+SHIFT+I to open
# the developer tools windows of Chrome. Click "console"
# to paste the following code into console. Press 'return'
# to execute print dialog.
#
# Note:
#============================================================
from head import *
codestr = '''(function(){
'use strict';
var articleBox = $("div.article_content");
articleBox.removeAttr("style");
$("#btn-readmore").parent().remove();
$("#side").remove();
$("#comment_title, #comment_list, #comment_bar, #comment_form, .announce, #ad_cen, #ad_bot").remove();
$(".nav_top_2011, #header, #navigator, #blogColumnPayAdvert, #toolBarBox, #csdn-copyright-footer").remove();
$(".csdn-side-toolbar,.template-box,.reward-user-box").remove();
$(".p4course_target, .comment-box, .recommend-box, #csdn-toolbar, #tool-box,#dmp_ad_58, .more-toolbox, .article-info-box, .btn-readmore").remove();
$("aside").remove();
$(".tool-box").remove();
$("main").css('display','content');
$("main").css('float','left');
$("#mainBox").css('width','90%');
$(".main_father.clearfix.d-flex.justify-content-center").css("width","90%"); //显示不全关键在于修改这里的width的比例
window.print(); // 修改成 90% 基本就可以显示全
})();'''
clipboard.copy(codestr)
printf('\a')
windtitle = tspgetwindowtitle()
printf(windtitle)
for s in windtitle:
if s.find('CSDN博客 - Google Chrome') < 0: continue
tspsendwindowkey(s, "v", control=1, noreturn=1)
tspsendwindowkey(s, "\r")
break
#------------------------------------------------------------
# END OF FILE : CDPDF.PY
#============================================================
■ 相关文献链接:
● 相关图表链接:
- 图1.3.1 打开Chrome开发者工具
- 图1.3.2 点击Console，然后粘贴代码
- 图1.3.3 弹出的打印浏览对话框
- 图1.4.1 打印输出的PDF样例
- 图1.4.2 最新的打印输出
- 图2.1 CSDN阅读页面
- 图2.1.1 打开开发者工具，切换到Element页面
- 图2.1.2 在显示元素上面点击右键，使用”检查“命令
- 图2.1.3 找到对应的ID字符串
- 图2.2.1 设置打印页边距