html转为pdf/打印的几个问题

最新推荐文章于 2023-11-02 16:35:42 发布

weixin_33877092

最新推荐文章于 2023-11-02 16:35:42 发布

阅读量1.5k

点赞数

文章标签：后端 python

原文链接：https://my.oschina.net/watcher/blog/1490312

版权

2019独角兽企业重金招聘Python工程师标准>>>

生成pdf工具比较

	chrome打印和预览	prince	wkhtmltopdf(pdfkit基于此)
地址	ctrl+p	http://www.princexml.com/	https://wkhtmltopdf.org/
收费	无需插件	收费软件（未购买可正常使用，但生成的pdf右上角有个P字图片，可pdf软件中手动删除，即使不除打印时候也不会有）	开源
flex布局	支持	不支持	不完全支持（使用中有错位，未追究原因）
print css	支持纸张大小、方向、@media print	几乎完全支持，包括页眉页脚设置等等	同chrome（具体记不太清了）

print css

http://www.w3cplus.com/css/designing-for-print-with-css.html 原生支持包括纸张大小、方向、页眉页脚（包括上下左右边框自定义样式内容）等等高级功能但是目前浏览器和生产pdf的软件大多不支持，只可简单使用@media print

html转pdf/打印的一些问题

border显示很粗

问题

如果内容使用下划线或者border属性，会发现边框很粗，原因是border-width无法设置到小于1px，又由于像素转为纸张的固定尺寸（厘米/英寸）后会变宽，所以打印后线条很粗

解决：

如果是单实线，可以使用一个div设置宽/高小于1px，设置背景色
可使用border-image设置一个图像做边框，用法请参考 http://www.360doc.com/content/14/1016/13/2792772_417403574.shtml 例如要做1/2px的细实线，则ps绘图如下（放大图，一格是一个像素），如图：

拿上边框区域来说，本来图片是2px，那么把图片中a的下面1px设为白色，border-width:1的时候就显示为0.5px宽的细线。

 div {
	border-top: solid 1px;
	border-image: "url(border.png) 2 2 round";
 }

由于小于1px，在浏览器中屏幕上是看不到的（验证方法为：ctrl+p打印预览中可以看到该线比正常1px的线要细）

图片文字变形或不清晰

问题

图片中含有文字，在网页中看起来正常和普通文字一样，但是打印后发现文字变形，跟普通文字根本不一样

解决

打印时一般分辨率最小为300dpi，所以在ps绘图时候必须创建像素为300的画布，且必须按固定长度（厘米或英寸）确定图片大小，文字也必须使用“点（即磅）”不能使用像素例子（以300dpi，画布长高10cm为例，请根据自己情况变化）：存储为web所用格式后，右键查看该图片文件属性，“详细信息”中会显示分辨率为96dpi。此时把图片放入网页会看到图片非常大，并不是我们预期的，这是因为图像是300分辨率的，同样10cm宽度，300分辨率的像素是96dpi的很多倍，这里假设是1000px，那么在网页中就是1000px，也就非常大。要显示正常就必须手动指定图像大小。由于分辨率不同，所以分辨率不能为参考，必须以固定单位为参考（这就是图像必须用固定单位厘米、英寸和点的原因），所以设置大小为10cm * 10cm，此时图片大小正好。如果是图片多且大小不一，需要自动处理，那么程序中必须计算显示的大小（因为无法知道宽高的固定长度）。两种方式：

var file = this.files[0];  // 通过文件选择器等获取的File对象
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
	var img = new Image()
	img.onload = function () {
		var height = (( this.naturalHeight / 300) * 96).toFixed(1)    // 300分辨率的图片，换算当前显示器像素  其中96为文件属性中的像素
		var width = (( this.naturalWidth / 300) * 96).toFixed(1)    // 300分辨率的图片，换算当前显示器像素
		console.log(height, width)
	};
	img.src = this.result

};

// 已经把图片设置为img标签的src，假设该img的id为img1
dom = document.getElementById("img1")
dom.naturalHeight 		// 图片真实高度
dom.naturalWidth 		// 图片真实宽度
width =  (( dom.naturalWidth / 300) * 96).toFixed(1)

转载于:https://my.oschina.net/watcher/blog/1490312