html实现打印预览效果

  • 格式:pdf
  • 大小:205.94 KB
  • 文档页数:2

html实现打印预览效果

前⾯说到利⽤lodop插件进⾏打印设置,那个应⽤于打印快递⾯单,或者跟快递⾯单相似场景的情况。

今天的利⽤html快速打印出A4纸⼤⼩的场景,例如:合同、静态⽂本等。效果如下:

⽅式⼀

1、设置div,打印区域,最好是单放在⼀页,因为需要打印的是该页所有内容

2、拼接div中需要的⽂本,可以设置动态数据填充

var contractContent = '';

contractContent += '

contractContent +=

'html打印合同             编号: DxWL-0017722 ';

contractContent += '

contractContent += '

contractContent += '';

contractContent += '

contractContent += '

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '托运⽅(以下简称甲⽅)';

contractContent += '';

contractContent += '';

contractContent += '单位名称';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '单位地址';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '公司电话';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '起运地点';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '⽬的地';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '联系电话';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '承运⽅(以下简称⼄⽅)';

contractContent += '';

contractContent += '';

contractContent += '车牌号';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '⾏驶证所有⼈';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '车型';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '驾驶员姓名';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '⾝份证号';

contractContent += '';

contractContent += '';

contractContent += '';

contractContent += '联系电话';