标签: html2canvas

<div id="Contents">
<div style="float:left;margin-left:10px;">
<svg></svg>
</div>
<div style="float:left;margin-left:10px;">
<svg></svg>
</div>
</div>

这是我的HTML代码.我想转换它的画布图像.

html2canvas($("#Contents"), {
  onrendered: function(canvas) {
   window.open(canvas.toDataURL());

  }
});

我使用html2canvas插件将其转换为图像,但它不显示svg.我解决了转换svg tp画布但现在html2canvas无法正常工作

  var $to=$("#MainContents").clone();

            $($to).children(".box").each(function() {
    var svg = ResizeArray[$(this).children(".box-content").children().attr("new-id")-1].svg();
            var Thiscanvas = document.createElement("canvas");
            Thiscanvas.setAttribute("style", "height:" + 100 + "px;width:" + 100+ "px;");

            canvg(Thiscanvas, svg);

            $(this).append(Thiscanvas);

        });
        html2canvas($($to), {
      onrendered: function(canvasq) {
        var w=window.open(canvasq.toDataURL());
        w.print();
      }
    });

我可以将svg转换为canvas但html2canvas函数无效.

我正在使用html2canvas库,使用以下代码:

html2canvas(document.body, {
   onrendered: function(canvas) {
      document.body.appendChild(canvas);
   }
});

当onrendered被触发时,页面会自动滚动到顶部.无论如何我们可以保持我们的滚动位置而不是自动进入页面顶部？

我注意到已经有一个版本"addHTML()现在可以将画布分成多个页面",可以通过以下链接找到:https://github.com/MrRio/jsPDF/releases/tag/v1.0.138.

我可以知道它是如何工作的吗？在我的情况下,我只是在点击"另存为pdf"按钮时尝试了它,它只渲染单个页面而不是多个页面(有时没有工作,我假设因为内容太长而无法生成为pdf) .

如果这个案例有一些例子,我将不胜感激.谢谢!

附上我的代码如下:

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

pdf.addHTML($(".pdf-wrapper"), function () {
    var string = pdf.output('datauristring');
    pdf.save("test.pdf");
});

我的情况是:

单击按钮时,将html上的数据导入PDF文件.

由于此PDF必须具有一些复杂的必需样式,因此我的第一步是使用html2canvas.js将此页面转换为图像,然后使用jsPDF.js将此图像导入PDF

当数据太大时,必须拆分PDF以保存所有数据,这样做,所以我在这里使用了代码:https://github.com/MrRio/jsPDF/pull/397

我的问题是:在Firefox上,第2页或第3页上的PDF分割页面无法显示,它们完全是空白的.但在第1页它很好.(这是为firefox)

我测试了其他浏览器它们都很好.有人可以说明如何解决这个问题吗？

这是我的plnkr:http://plnkr.co/edit/ElvAsriK2nssq2U9pgKX？p = preview

function initTemplate(){
      datas=getData();
      var templateData=_.template($('#tpl').html(), datas);
      $('#tplW').html(templateData);
      getPDF();
      //  $('#tplW').append(_.template($('#tpl').html(), datas));
      // $('body').html( _.template($('#tpl').html(), datas));

 }


   function getData(){
      var htmlData=$(".MsoNormalTable .inner").find("tr.tablerow");
         var datas=[];
         $.each(htmlData,function(i,v){
             var d=[];
             var tds=$(v).find("td");
             $.each(tds,function(index,val){
                 d.push($(val).text());
             });
              datas.push(d); 
         });
       return datas;
   }



function getPDF() {
    // initTemplate();
         html2canvas($('#tplW')[0], {
        onrendered: function(canvas){

            canvasToImageSuccess(canvas);
        }
    });



    function canvasToImage (canvas){
        var img = new Image();
        var dataURL = canvas.toDataURL('image/png');
        img.src = dataURL;
        return img;
    }; …

我正在使用html2canvas来创建包含SVG的HTML页面的"屏幕截图".除了元素外,一切看起来都不错.我知道应该可以在Canvas中渲染SVG; PhantomJS,fabric.js和CanVG都可以.

这是html2canvas不支持的东西吗？或者我做错了什么,这应该有效吗？

如果没有实现,扩展html2canvas(使用canvg)的最佳方法是什么？

我有一个HTML页面.我有一个按钮,当我单击此按钮时,它将使用html2canvas将整个html页面转换为数据图像,并使用jsPDF库将其放入PDF.我正在使用的javascript是

$("#printButton").click(function(){
html2canvas([document.getElementById('form1')], {
        onrendered: function (canvas) {
            var imageData = canvas.toDataURL('image/jpeg',1.0); 
           var doc = new jsPDF('landscape');
           doc.addImage(imageData,'JPEG',5,20,200,150);
           doc.save('Test.pdf');
     }
    });
});

它仅在第一页显示图像.但是每当html页面大小更多时,我想剪切图像数据并将其放在PDF格式的两页中.请帮我解决这个问题.

使用html2canvas如何将屏幕截图保存到对象？我一直在探索演示,并看到生成屏幕截图的函数生成如下:

$(window).ready(function() {
  ('body').html2canvas();       
});

我尝试过的是

$(window).ready(function() {
  canvasRecord = $('body').html2canvas(); 
  dataURL = canvasRecord.toDataURL("image/png");
  dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  upload(dataURL);

});

然后,我将其传递给我的upload()函数.我遇到的问题是,我无法弄清楚在html2canvas()库中制作屏幕截图的位置或者什么函数返回它.我试着转换使用Canvas对象这从SO答案(虽然我不能肯定我需要做到这一点).

我只问了一个问题,关于如何上传文件到imgur,有答案(尤其是@ bebraw的)帮助我明白我需要做的.

该upload()函数来自Imgur示例api帮助:

function upload(file) {
   // file is from a <input> tag or from Drag'n Drop
   // Is the file an image?
   if (!file || !file.type.match(/image.*/)) return;

   // It is!
   // Let's build a FormData object
   var fd = new FormData();
   fd.append("image", file); // …

我想在客户端生成一个PDF文件,其中包含一个图表和来自JSON对象的其他表格数据.

以下是Javascript数据绑定部分:

BindReportToPdf: function (data) {
    //data is json object
    var rows = data;
    var columns = [
        { title: "S.No", key: "RowNum" },
        { title: "Title", key: "TTitle" },
        { title: "Phone Number", key: "PhoneNumber" },
        { title: "Loc. Name", key: "LocationName" },
        { title: "Dept. Name", key: "DepartmentName" }
    ];
    var doc = new jsPDF("I", "mm", "a4");

    var canvas1 = document.getElementById("rptcanvas");
    var content = $("#sfDepartmentbar").html();
    canvg(canvas1, content, {
        renderCallback: function () {
            html2canvas($("#rptgraphsec"), {
                onrendered: function (canvas) { …

如何使用带有angular2的html2canvas生成输出文件PDF

我试图导入文件html2canvas typescript并发出这样的声明来使用它

declare let html2canvas: Html2CanvasStatic;

但是我没有定义html2canvas

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

我在github html2canvas typescript上找到了这个文件打字稿

如何将此用于我的应用angular2

对于我正在进行的项目,我需要能够生成用户当前所在页面的PDF,我将使用该页面jspdf.由于我HTML需要生成PDF,我需要这个addHTML()功能.关于这一点有很多话题,说

你需要使用html2canvas或rasterizehtml.

我选择使用html2canvas.这就是我的代码目前的样子:

import { Injectable, ElementRef, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf';
import * as d3 from 'd3';
import * as html2canvas from 'html2canvas';

@Injectable ()
export class pdfGeneratorService {

  @ViewChild('to-pdf') element: ElementRef;

  GeneratePDF () {
    html2canvas(this.element.nativeElement, <Html2Canvas.Html2CanvasOptions>{
      onrendered: function(canvas: HTMLCanvasElement) {
        var pdf = new jsPDF('p','pt','a4');

        pdf.addHTML(canvas, function() {
          pdf.save('web.pdf');
        });
      }
    });
  }
}

调用此函数时,出现控制台错误:

EXCEPTION:./AppComponent类中的错误AppComponent - 内联模板:3:4导致:您需要https://github.com/niklasvh/html2canvas或https://github.com/cburgmer/rasterizeHTML.js …