Javascript 通过具有SVG的jsPDF将HTML Div转换为PDF

我正在尝试使用

jsPDF

将html div转换为pdf。在我的div中，我有一个带有背景图像的

svg

文件，用户可以在其中绘制矩形、直线、文本等。我正在使用

d3.js

进行绘制。现在我想将我的div和所有的图形保存为pdf，但它只将我的文本转换为pdf。我的js代码是

   function htmlToPdf() {
  console.log("--------------- with in 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 = $('svg.plancontainer')[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
    '#bypassme': 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.autoPrint();
      pdf.output('dataurlnewwindow');
    }, margins
  );
}

cdn是

它打印

打印区域

，而不是我的

图像

和不带

svg

绘图的文本

这是我想要转换为pdf的示例div预览 我没有得到任何具体的信息来说明在哪里可以使用

jsPDF

现在我的问题是

• 是否可以使用

  jsPDF

  或任何其他js库

• 如果可能的话，你能推荐我吗

---

感谢您的任何帮助。谢谢。

我正在分享我的解决方案，这可能会对某人有所帮助。我无法直接使用

jspdf

来管理打印

svg

，而是首先使用将

svg

转换为图像，然后使用该图像创建pdf。下面是我的代码

使用

svgasnguri

方法savesvgasng获取

base64图像uri

，并通过回调函数传递该图像

svgAsPngUri(#svgObj, options, function (uri, options) {
        pdf(uri, options.pdf)
    });

在这里，我得到

图像uri

作为

uri

。在我的

pdf

函数中，我使用此

uri

制作pdf

function pdf(b64Image, options) {
    console.log("--------------- passing options is ", JSON.stringify(options, null, 4));
    var image = new Image();
    image.src = b64Image;
    console.log('--------- pdf options' + JSON.stringify(options, null, 4));
    var pdf = new jsPDF(options.orientation, null, options.format);

    margins = {
        top: 20,
        bottom: 20,
        left: 20,
        right: 20
    };

    var pdfWidth = pdf.internal.pageSize.width;
    var pdfHeight = pdf.internal.pageSize.height;
    var footer_height = options.f_height || 30;
    var htmlPageRightOffset = 0;

    var outerRacBorder = 2;
    var imageDrawableHeight = pdfHeight - margins.top - margins.bottom - footer_height - outerRacBorder;
    var imageDrawableWidth = pdfWidth - margins.left - margins.right - outerRacBorder;

    footer = {
        top: margins.top + imageDrawableHeight + outerRacBorder + 10,
        bottom: 20,
        left: margins.left,
        right: 20,
        width: 100,
        height: 25,
    };

    company_text_position = {
        x: footer.left+2,
        y: footer.top + 6
    };
    site_text_position = {
        x: company_text_position.x,
        y: company_text_position.y + 6
    };
    floor_plan_text_position = {
        x: site_text_position.x,
        y: site_text_position.y + 6
    };
    logo_text_position = {
        x: pdfWidth - margins.left - 55,
        y: pdfHeight - margins.bottom - 4
    };
    logo_image_position = {
        x: logo_text_position.x +35,
        y: logo_text_position.y - 4
    };
    /*
     Image drawing on pdf
     */
    imageSize = calculateAspectRatioFit(image.width, image.height, imageDrawableWidth, imageDrawableHeight);
    pdf.addImage(image, 'JPEG', margins.left + 2, margins.top + 2, imageSize.width, imageSize.height);

    /*
     Outer rectangle
     */
    pdf.rect(margins.left, margins.top, imageDrawableWidth + outerRacBorder, imageDrawableHeight + outerRacBorder);

    // pdf.rect(margins.left, imageSize.height + 10, drawableWidth, (drawableWidth - imageSize.height));

    pdf.rect(footer.left, footer.top, footer.width, footer.height);
    console.log(footer.left);
    console.log(footer.company_x);

    var footer_data = getFooterInfo();
    pdf.text("Company: " + footer_data.client, company_text_position.x, company_text_position.y);
    pdf.text("Site: " + footer_data.site, site_text_position.x, site_text_position.y);
    pdf.text("Floor Plan: " + footer_data.floor_plan, floor_plan_text_position.x, floor_plan_text_position.y);

    pdf.text("Powered by: ", logo_text_position.x, logo_text_position.y);

    var logo = new Image();
    logo.src = $('#logo_image').val();
    console.log(logo);
    logoSize = calculateAspectRatioFit(logo.width, logo.height, 20, 10);
    pdf.addImage(logo, 'JPEG', logo_image_position.x, logo_image_position.y, logoSize.width, logoSize.height);

    pdf.autoPrint();
    pdf.save(options.name + '.pdf');
}


/**
 * Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
 * images to fit into a certain area.
 *
 * @param {Number} srcWidth Source area width
 * @param {Number} srcHeight Source area height
 * @param {Number} maxWidth Fittable area maximum available width
 * @param {Number} maxHeight Fittable area maximum available height
 * @return {Object} { width, heigth }
 *
 */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
    if(srcHeight == 0 || srcWidth == 0){
      return {width: maxWidth, height: maxHeight};
    }

    var ratio = [maxWidth / srcWidth, maxHeight / srcHeight];
    ratio = Math.min(ratio[0], ratio[1]);

    return {width: srcWidth * ratio, height: srcHeight * ratio};
}

function getFooterInfo() {
    var elem = $('.entityselbin .h4');
    var info = {};
    info.client = elem[0].innerHTML;
    info.site = elem[1].innerHTML;
    info.floor_plan = elem[2].innerHTML;
    return info;
}

---

您可以使用示例中提到的最新

canvg\u context2d

方法将SVG直接写入PDF

---

这适用于大多数svg内容。

下面是上述问题的工作示例

需要包括这三个文件引用

$.getScript（“”）， $.getScript（“”）， $.getScript（“”）

函数createPDF（）{
var svg=''；
//提供SVG父div id
if（document.getElementById（“ChartId”）！=null）{
svg=document.getElementById（“ChartId”）.innerHTML；
}
如果（svg）
svg=svg.replace（/\r？\n |\r/g'）.trim（）；
var pdfData=$（'#htmlContainer'）；//主html div
html2canvas（pdfData{
onrendered：函数（画布）{
var contentWidth=canvas.width；
var contentHeight=canvas.height；
//一个pdf页面可以显示的画布高度；
var pageHeight=contentWidth/592.28*841.89；
//未渲染为pdf的画布的高度
var leftHeight=contentHeight；
//addImage y轴偏移
var位置=0；
//a4格式[595.28841.89]
var imgWidth=595.28；
var imgHeight=592.28/内容宽度*内容高度；
var ctx=canvas.getContext（'2d'）；
canvg（画布、svg、{
抵销额：10，
副职：660，
无知的老鼠：是的，
无知的动画：是的，
ignoreClear:是的，
忽略维度：true
});
var pageData=新图像（）；
pageData=canvas.toDataURL（'image/jpeg'，1.0）；
var pdf=新的jsPDF（'l'，'pt'，'a4'，真）；
if（leftHeight0）{
pdf.addImage（页面数据，'JPEG'，0，位置，imgWidth，imgHeight）
leftHeight-=页面高度；
位置-=841.89；
//避免空白页
如果（leftHeight>0）{
pdf.addPage（）；
}
}
}
保存（'Test.pdf'）；
}
});
}

---

希望这会有帮助。

您找到解决方案了吗？这对我不起作用。我使用的是floppt.js，结果PDF中没有显示链接。

function createPDF() {

    var svg = '';
// Provide the SVG parent div id

    if (document.getElementById("ChartId") != null) {
        svg = document.getElementById("ChartId").innerHTML;
    }

    if (svg)
        svg = svg.replace(/\r?\n|\r/g, '').trim();

    var pdfData = $('#htmlContainer');//main html div


    html2canvas(pdfData, {
        onrendered: function(canvas) {

            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //The height of the canvas which one pdf page can show;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //the height of canvas that haven't render to pdf
            var leftHeight = contentHeight;
            //addImage y-axial offset
            var position = 0;
            //a4 format [595.28,841.89]       
            var imgWidth = 595.28;
            var imgHeight = 592.28 / contentWidth * contentHeight;

            var ctx = canvas.getContext('2d');


            canvg(canvas, svg, {
                offsetX: 10,
                offsetY: 660,
                ignoreMouse: true,
                ignoreAnimation: true,
                ignoreClear: true,
                ignoreDimensions: true
            });

            var pageData = new Image();
            pageData = canvas.toDataURL('image/jpeg', 1.0);


            var pdf = new jsPDF('l', 'pt', 'a4', true);

            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 100, 20, imgWidth, imgHeight);

            } else {
                console.log('page 2');
                while (leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //avoid blank page
                    if (leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save('Test.pdf');
        }
    });
}