如何使用jspdf更改下载的pdf中图表标题的字体大小

卡林库什

我在这里使用 jspdf。我也在使用 Highchart 插件当您单击 submit1 按钮时,图表将生成,当您按下下载按钮时,这些图表将下载为 pdf。一切正常,但我只需要减小下载的 pdf 中图表标题的字体大小。http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview这是我在 plunker 中的现场演示。也在这里我有 html 和 javascript 代码

HTML

<div><img id="logo" style="width:30%" src="https://www.gstatic.com/webp/gallery3/3.png"/>dddddddd</div>
 <input type="button" id="download"  value="download" /> click to console
  <div><button id="button1" class="button1">submit1</button></div>
  <p id="bottom-content">footer</p>

脚本

$(document).ready(function() {
    var index = 0;
    var id = [];
    $('#button1').on('click', function() {
        $('body').append($("<div id='chart" + index + "'></div>"));

        Highcharts.chart('chart' + index, {
           title: {
        text: 'Chart-'+index+''
    },
            series: [{
                data: [1, 2, 3]
            }]
        });
        var temp = "chart" + index + "";
        console.log(temp);
        id.push(temp);

        index++;
    });

    $('#download').on('click', function() {
console.log(id);
  var doc = new jsPDF('portrait', 'pt', 'a4', true);
  var elementHandler = {
    '#ignorePDF': function(element, renderer) {
      return true;
    }
  };

  var source = document.getElementById("logo");
  doc.fromHTML(source, 15, 15, {
    'width': 200,
    'elementHandlers': elementHandler
  });

  var DOMURL = window.URL || window.webkitURL || window;
   var elements = id;

 // console.log(xx);
  for (let i in elements) {


      let svg = document.querySelectorAll('svg');
      let canvas = document.createElement('canvas');
      let canvasIE = document.createElement('canvas');
      let context = canvas.getContext('2d');

      let data1 = (new XMLSerializer()).serializeToString(svg[i]);

      canvg(canvas, data1);
      let svgBlob = new Blob([data1], {
        type: 'image/svg+xml;charset=utf-8'
      });

      let url = DOMURL.createObjectURL(svgBlob);

      let img = new Image();
      img.src = url;
      img.onload = function() {
        context.canvas.width = $("#"+elements[i]).find('svg').width();
        context.canvas.height = $("#"+elements[i]).find('svg').height();

        context.drawImage(img, 0, 0);
        // freeing up the memory as image is drawn to canvas
        DOMURL.revokeObjectURL(url);

        var dataUrl;
        if (isIEBrowser()) { // Check of IE browser 
          var svg = $(elements[i]).highcharts().container.innerHTML;
          canvg(canvasIE, svg[i]);
          dataUrl = canvasIE.toDataURL('image/JPEG');
        } else {
          dataUrl = canvas.toDataURL('image/jpeg');
        }

        doc.addImage(dataUrl, 'JPEG', 20, 150, 560, 350);

          let bottomContent = document.getElementById("bottom-content");
  doc.fromHTML(bottomContent, 15, 700, {
    'width': 560,
    'elementHandlers': elementHandler
  });

  let logo = document.getElementById("logo");
         doc.fromHTML(logo, 15, 200, {
    'width': 560,
    'elementHandlers': elementHandler
  });

  doc.addPage();

      };



    }


  setTimeout(function() {
    doc.save('TestChart"'+index+'".pdf');
  }, 1000);

});
});
function isIEBrowser() {
  var ieBrowser;
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer
  {
    ieBrowser = true;
  } else //Other browser
  {
    console.log('Other Browser');
    ieBrowser = false;
  }

  return ieBrowser;
};
波塔切克

font-size单击download按钮后,您可以setTitle方法中更改标题样式

var charts = Highcharts.charts;

charts.forEach(function(chart){
  chart.setTitle({
    style: {
      fontSize: '32px'
    }
  });
}); 

现场演示:http : //plnkr.co/edit/DpFULmbOa8vjk1VEZ5nD?p=preview

API:https : //api.highcharts.com/class-reference/Highcharts.Chart#setTitle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何更改Google图表标题字体大小?

来自分类Dev

使用C#在datagridview中调整行标题的大小时,如何动态更改字体大小?

来自分类Dev

如何在TabControl中更改标签标题的字体大小?

来自分类Dev

更改图表标题中的字体大小

来自分类Dev

更改 RMarkdown PDF 中的字体大小

来自分类Dev

在 Altair 中增加图表标题的字体大小

来自分类Dev

在JavaFX中更改图表中标签的字体大小

来自分类Dev

在JavaFX中更改图表中标签的字体大小

来自分类Dev

如何更改括号中的字体大小

来自分类Dev

如何在xyscatter图表的python-pptx中设置图表的字体大小,轴值和轴标题

来自分类Dev

如何设置/更改UIBarButtonItem标题的字体大小

来自分类Dev

使用itextsharp更改pdf中的默认字体和字体大小

来自分类Dev

在bokeh中更改滑块标题的字体大小

来自分类Dev

更改图表的字体大小

来自分类Dev

我无法更改下拉菜单的字体大小

来自分类Dev

如何在地图标题iOS Xamarin(C#)中更改字体大小

来自分类Dev

如何在jquery-mobile中更改选择列表标题的字体大小?

来自分类Dev

如何更改字体大小?

来自分类Dev

如何在iText中更改渲染的PDF文档中的字体大小?

来自分类Dev

如何更改数据表中的导出PDF字体大小?

来自分类Dev

如何根据Xcode中的系统字体大小更改标签的字体大小?

来自分类Dev

如何增加窗口标题的字体大小?

来自分类Dev

图表标题和轴标签的javafx字体大小

来自分类Dev

如何在javafx中更改文本字体大小?

来自分类Dev

如何在phpStorm 8中更改字体大小的代码?

来自分类Dev

如何在emacs中更改字体大小?

来自分类Dev

闪亮-如何更改选择标签中的字体大小?

来自分类Dev

如何在drawString Java中更改字体大小

来自分类Dev

C-如何在Ncurses中更改字体大小?

Related 相关文章

  1. 1

    如何更改Google图表标题字体大小?

  2. 2

    使用C#在datagridview中调整行标题的大小时,如何动态更改字体大小?

  3. 3

    如何在TabControl中更改标签标题的字体大小?

  4. 4

    更改图表标题中的字体大小

  5. 5

    更改 RMarkdown PDF 中的字体大小

  6. 6

    在 Altair 中增加图表标题的字体大小

  7. 7

    在JavaFX中更改图表中标签的字体大小

  8. 8

    在JavaFX中更改图表中标签的字体大小

  9. 9

    如何更改括号中的字体大小

  10. 10

    如何在xyscatter图表的python-pptx中设置图表的字体大小,轴值和轴标题

  11. 11

    如何设置/更改UIBarButtonItem标题的字体大小

  12. 12

    使用itextsharp更改pdf中的默认字体和字体大小

  13. 13

    在bokeh中更改滑块标题的字体大小

  14. 14

    更改图表的字体大小

  15. 15

    我无法更改下拉菜单的字体大小

  16. 16

    如何在地图标题iOS Xamarin(C#)中更改字体大小

  17. 17

    如何在jquery-mobile中更改选择列表标题的字体大小?

  18. 18

    如何更改字体大小?

  19. 19

    如何在iText中更改渲染的PDF文档中的字体大小?

  20. 20

    如何更改数据表中的导出PDF字体大小?

  21. 21

    如何根据Xcode中的系统字体大小更改标签的字体大小?

  22. 22

    如何增加窗口标题的字体大小?

  23. 23

    图表标题和轴标签的javafx字体大小

  24. 24

    如何在javafx中更改文本字体大小?

  25. 25

    如何在phpStorm 8中更改字体大小的代码?

  26. 26

    如何在emacs中更改字体大小?

  27. 27

    闪亮-如何更改选择标签中的字体大小?

  28. 28

    如何在drawString Java中更改字体大小

  29. 29

    C-如何在Ncurses中更改字体大小?

热门标签

归档