Question

我需要使用按钮属性'onclick（）'在新页面中打印当前的html页面我使用了以下

javascript
function printPartOfPage(elementId)
{
 var printContent = document.getElementById(elementId);
 var windowUrl = 'P2P Money Transfer';
 var uniqueName = new Date();
 var windowName = 'P2P Money Transfer  -' + uniqueName.getTime();

 var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

 printWindow.document.write(printContent.innerHTML);
 printWindow.document.close();
 printWindow.focus();
 printWindow.print();
 printWindow.close();
}
</script>

<input type="button" value="Print" onclick="JavaScript:printPartOfPage('printDiv');" >

但问题是没有实现样式，所以我需要当前整个html页面转移到方法并使用document.write（）编写它，其中包含所有样式。

Answer 1

我建议您使用printThis jquery库来实现目标。

使用此库，您可以打印页面的某些部分（例如div）并决定使用页面的css或外部css作为参数添加。这里有一个参数列表

$("#mySelector").printThis({
 *      debug: false,               * show the iframe for debugging
 *      importCSS: true,            * import page CSS
 *      importStyle: false,         * import style tags
 *      printContainer: true,       * grab outer container as well as the contents of the selector
 *      loadCSS: "path/to/my.css",  * path to additional css file - us an array [] for multiple
 *      pageTitle: "",              * add title to print page
 *      removeInline: false,        * remove all inline styles from print elements
 *      printDelay: 333,            * variable print delay
 *      header: null,               * prefix to html
 *      formValues: true            * preserve input/form values
 *  });

如您所见，属性importStyle，如果将其设置为true，则脚本会加载页面的相同脚本。您还可以使用属性loadCSS加载外部css。

我已经使用它并且效果很好。

查看this小提琴示例

打印下一页的当前html页面

1 个答案: