在 iframe 标签中使用 pdfmake 生成 pdf

nov*_*ato 2 html javascript pdf iframe

我有这个 JS,我想使用这个 js(用 pdfmake 制作)在 iframe 标签中生成 pdf

  function start(){
  var docDefinition = {
  content: [
    {
      table: {
       multiple pages

        headerRows: 1,
        widths: [ '*', 'auto', 100, '*' ],

        body: [
          [ 'First', 'Second', 'Third', 'The last one' ],
          [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
          [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
        ]
      }
    }
  ]
  };

   pdfMake.createPdf(docDefinition).open();

}
Run Code Online (Sandbox Code Playgroud)

在此 iframe 中显示 pdf:

  <frameset cols="25%,*,25%">
      <frame src="">
  </frameset>
Run Code Online (Sandbox Code Playgroud)

当我点击这个按钮时:

<button type="submit" name="save" class="btn btn-default" onclick="start();">Savw</button>
Run Code Online (Sandbox Code Playgroud)

谢谢。

Rav*_*gon 6

我认为我的设置略有不同,但试试这个 - 类似的东西对我有用。

首先,放一个id<frame src="" id="foo">然后替换

// pdfMake.createPdf(docDefinition).open();
var doc = pdfMake.createPdf(docDefinition);
var f = document.getElementById('foo');
var callback = function(url) { f.setAttribute('src',url); }
doc.getDataUrl(callback, doc);
Run Code Online (Sandbox Code Playgroud)

getDataUrl 函数以生成的 url 作为参数运行回调函数。该回调应该在您的框架上设置 src 属性。我的回调也包括在内,console.log(url);所以我可以看到发生了什么。