html页面访pdf样式,javascript – 使用jsPDF生成保留HTML页面样式的pdf

我正在尝试创建一个按钮,它将开始自动下载页面的PDF,因为它看起来与sass样式.然而,我尝试的一切都以造型混乱而告终.

这是页面(这是一个有几种不同内容类型的测试站点)

但PDF看起来像这样：

我正在拉jspdf.debug.js并在我的页面中有以下HTML按钮脚本：

Generate PDF

function demoFromHTML() {

var pdf = new jsPDF('p', 'pt', 'letter');

// source can be HTML-formatted string, or a reference

// to an actual DOM element from which the text will be scraped.

source = $('#content')[0];

// we support special element handlers. Register them with jQuery-style

// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)

// There is no support for any other type of selectors

// (class, of compound) at this time.

specialElementHandlers = {

// element with id of "bypass" - jQuery style selector

'#bypass': function (element, renderer) {

// true = "handled elsewhere, bypass text extraction"

return true

}

};

margins = {

top: 80,

bottom: 60,

left: 40,

width: 522

};

// all coords and widths are in jsPDF instance's declared units

// 'inches' in this case

pdf.fromHTML(

source, // HTML string or DOM elem ref.

margins.left, // x coord

margins.top, { // y coord

'width': margins.width, // max width of content on PDF

'elementHandlers': specialElementHandlers

},

function (dispose) {

// dispose: object with X, Y of the last line add to the PDF

// this allow the insertion of new lines after html

pdf.save('Test.pdf');

}, margins);

}

如何使样式从html到pdf保持一致？

解决方法:

我的按钮通过html2canvas选项隐藏自pdf：

Generate PDF

和html页面底部的脚本

function demoFromHTML() {

var pdf = new jsPDF('p', 'pt', 'letter');

var options = {

background: '#fff' //background is transparent if you don't set it, which turns it black for some reason.

};

pdf.addHTML($('#content')[0], options, function () {

pdf.save('Test.pdf');

});

}

同样在html2canvas.js中我改变了：

_html2canvas.Util.isTransparent = function(backgroundColor) {

return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");

};

为此,为了避免透明到黑色的背景

_html2canvas.Util.isTransparent = function(backgroundColor) {

return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)" || backgroundColor === undefined);

};

希望有人帮助！

标签：javascript,css,pdf,html,jspdf

来源： https://codeday.me/bug/20190528/1168395.html