侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 144665 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

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

2024-04-03 星期三 / 0 评论 / 0 点赞 / 4 阅读 / 4582 字

生成pdf工具比较chrome打印和预览princewkhtmltopdf(pdfkit基于此)地址ctrl+phttp://www.princexml.com/https://wkhtmltopdf

生成pdf工具比较

chrome打印和预览princewkhtmltopdf(pdfkit基于此)
地址ctrl+phttp://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为img1dom = document.getElementById("img1")dom.naturalHeight 		// 图片真实高度dom.naturalWidth 		// 图片真实宽度width =  (( dom.naturalWidth / 300) * 96).toFixed(1)

广告 广告

评论区