浏览器打印，Chrome网页打印中的宽度控制

Chrome可直接将网页保存（打印）为PDF（无需安装Adobe）

Chrome在保存为PDF文件时，默认纸张大小是A4。若布局为纵向，显示大小为210mm×297mm；若布局为横向，显示大小为297mm×210mm。

Windows下的网页打印的默认DPI为96dpi。按照1英寸=25.41mm换算，A4纸张可实际显示的像素宽度为794px×1123px，即打印网页的宽度为794px。

实际打印还会有页边距，如果页边距为5mm（窄边距），网页内容最大宽度约750px，若页边距为19mm（默认边距），网页内最大元素分辨率约650px。

基于此，很多网页在打印时会变形，因为打印时内容容器的宽度只有750px或者650px，但现在的网页内容大多都是基于至少1000px以上宽度设计的，这时候浮动容器会错位、超过宽度的图片和表格会显示不完全。

解决办法有两个。

其一，锁定网页的宽度。

当网页宽度被指定时，页面将被自动缩放。这可以保证PDF文件和浏览器上显示的效果一模一样。这时候打印出的PDF文件仍是A4大小。

其二，指定打印纸张大小。

@media print {
    @page {
        size: 210mm 297mm;  /* or size: 794px 1123px;   */
        size: 297mm 420mm;  /* or size: 1123px 1588px;  */
    }
}

原文：http://www.yujianlong.com/qianduan/7.html

第一种方法没有试验过，我是使用的第二种方法：

/* 通过分别设置左页和右页不同的左右页面距，为装订边留出更多的空间 */
   @media print {
    @page {
      size: 1800px 1800px;  /* or size: 1123px 1588px;  */
 
    }
    /* 设置 body 元素的 margin 来保证打印出来的页面带有外边距 */
    body {
      margin: 1cm;
    }
  }

我在做项目时用到的调用浏览器打印的方法。

function Print(){
		//根据div标签ID拿到div中的局部内容
      	var newStr=document.getElementById("opt-content").innerHTML;
      	var oldStr=document.body.innerHTML;
      	//把获取的局部div内容赋给body标签, 相当于重置了 body里的内容
      	document.body.innerHTML=newStr;
      	//调用打印功能
    	window.print();
    	//重新给页面内容赋值；
      	document.body.innerHTML=oldStr;
      	return location.reload();
    }

调用浏览器打印会比一般打印的方法简单很多。Return location.reload在这里是刷新的意思，如果没有这句代码打印完后要重新刷新一次网页才能再次打印

思路：先用一个div把要打印的页面包裹起来，再将打印的部分转换成HTML格式，然后触发打印事件