如何打印比赛规则？

[导读]简介：根据生成文档的需要，在CSDN上寻找一些介绍将MARKDOWN文档生成PDF博文。根据他们介绍的方法，测试打印的效果。特别是对于CSDN新增加的一些显示元素的清理，可以生成更加干净完整的PDF文档。关键词：MarkDown，CSDN，PDF01CSDN→PDF一、CSDN的...

简介：根据生成文档的需要，在CSDN上寻找一些介绍将MARKDOWN文档生成PDF博文。根据他们介绍的方法，测试打印的效果。特别是对于CSDN新增加的一些显示元素的清理，可以生成更加干净完整的PDF文档。
关键词：MarkDown，CSDN，PDF



	01 CSDN→PDF


	一、CSDN的Markdown编辑器

CSDN的Markdown编辑器功能强大，可以包含丰富的内容（文字、公式、图片、动图、表格、流程图、程序代码、影片等等）。基于该编辑器，常用来：

	



	
		编辑微信内容，然后再借助于 mdnice^[1] 外部套一个马甲生成微信推文；特别是CSDN允许直接图片粘贴存储图片。
		
			

		
	
	
		记录平时实验研究工作，得益于Markdown文档可以很方便将实验程序、数据、图片以及动图进行记录。
		
			

		
	
	
		记录智能车竞赛相关工作。CSDN博文审查非常迅速，而且7/24，便于及时整理同学们反馈意见对相关文档进行修改发布，几乎可以达到实时。
		
			

		
	

昨天在CSDN上整理发布的 智能车竞赛比赛规则（讨论稿）^[2] 快速根据同学们的反馈进行修改和迭代。

	



	二、Markdown文件转成PDF

对于需要阅读文献，总是联网在CSDN网页上阅读还是不太方便。如果将其转换成PDF文档，进行打印和阅读则更加方便。

	


现在在CSDN的MarkDown编辑器只支持输出 Markdown文件和HTML文件，还不支持输出Word， PDF文件。如果将其Markdown文件下载，在第三方MD编辑器进行编辑和显示，会丢失一些CSDN的Markdown的特性，一些公式的显示，流程图的绘制等都会消失。

	


根据CSDN多篇博文介绍的方案，利用Chrome浏览器本身调试功能将Markdown文档生成PDF文件。下面是相关的博文：

	



	
		新CSDN文章转成PDF、打印(去空白)
		
			

		
	
	
		如何将CSDN文章内容转成PDF^[3]
		
			

		
	
	
		CSDN博客转存为PDF^[4]
		
			

		
	


	三、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文档。

	


比赛规则的正式文档，请大家在竞赛网站下载：

	


smartcar.cdstm.cn

	



	◎ 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

#******************************


                
            欲知详情，请下载word文档 下载文档

如何打印比赛规则？

`01 CSDN→PDF`

`一、CSDN的Markdown编辑器`

二、Markdown文件转成PDF

三、PDF转换过程

1、打开Chrome开发者工具

2、在Console界面下粘贴代码

（1）点击“Console”

（2）粘贴代码

3、页面打印对话框

4、打印示例

1、开始打印输出

2、最新打印输出

02 如何整理页面？

一、去除页面无关元素

1、去除方法

2、如何定位元素ID ？

（1）打开开发者工具

（2）右键“检查”命令

二、修改页面宽度

1、修改宽度比例

2、修改页面高度

※ 内容总结 ※

◎ CDPDF程序