pdfmake.js 未捕获的类型错误：无法读取 null 的属性“长度”答案

【问题标题】：pdfmake.js Uncaught TypeError: Cannot read property 'length' of nullpdfmake.js 未捕获的类型错误：无法读取 null 的属性“长度”
【发布时间】：2016-02-22 21:34:36
【问题描述】：

未捕获的类型错误：无法读取 null 的属性“长度”

在我的客户端机器上运行下一个 html/javascript 代码时，它可以在操场上运行，但我不知道错误是什么。

游乐场：http://pdfmake.org/playground.html

<html> <head>
<title>Ingreso Simple</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/pdfmake.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/vfs_fonts.js"></script>
</head> <body> <script>
var usuario = 'user';
var left = 25;
var right = 25;
var top = 290;
var bottom = 50;


var dd = {
    // a string or { width: number, height: number }
    pageSize: 'LETTER',

    // by default we use portrait, you can change it to landscape if you wish
    pageOrientation: 'portrait',

    // [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins
    pageMargins: [left, top, right, bottom],
    footer: function (currentPage, pageCount) {
        return {
            margin: [25,10,0,0],
            text:currentPage.toString() + ' / ' + pageCount};
    },
    fontSize: 9,
    header: {
        margin: [0,25,25,25],
        fontSize: 9,
        stack: [
            {columns: [
                {text: ' ', width:150},
                {stack: [
                    {text: 'ASDASD',fontSize: 14},
                    {text: 'DGDFGDF',fontSize: 12},
                    {text: 'ASDA 225522',fontSize: 12}
                ]},
                {stack: [
                    {text: 'EMS',fontSize: 11},
                    {text: '22/02/2016',fontSize: 11},
                    {text: usuario, fontSize: 11}],
                    alignment: 'right',
                    width: 85
                }
            ]
            },
            {
                margin: [25, 15, 0, 0],
                columns: ['IMERC RECIB', {text: 'SIMPLE', alignment: 'right'}]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Descargado por: ',bold:true}, 'Cliente']},
                    {text:[{text:'Mercaderia Paletizada? ',bold:true}, 'Granel']},
                    {text:[{text:'Utiliza DAN? ',bold:true}, 'SI']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Bulks Armados: ',bold:true}, '7.0'], width:95},
                    {text:[{text:'Bulks Flejados: ',bold:true}, '7.0'], width:95},
                    {text:[{text:'Area ocupada: ',bold:true}, '19.0 m²']},
                    {text:[{text:'Volumen ocupado: ',bold:true}, '37.0 m³']},
                    {text:[{text:'Peso kilogramos: ',bold:true}, '3200.0']}
                ]
            }
        ]
    },
    content: [
        {
            fontSize: 9,
            table:{
                headerRows:1,
                widths: [ 60, 60, 145, 135, 55, 55 ],
                body:[
                    [
                        'Codigo 1',
                        'Codigo 2',
                        'Descripcion Mercaderia',
                        {stack:['$$%%%', {columns:['Dec', 'Rec', 'Dif']}],alignment: 'center'},
                        'UM',
                        'EM'
                    ],[
                        '10094461 2',
                        ' ',
                        'Exhividres de mesa',
                        {stack:[{columns:['0','0','0']}]},
                        'BTOS',
                        'Resellado'
                    ],[
                        '10094461 2',
                        ' ',
                        'Exhividres de mesa',
                        {stack:[{columns:['0','0','0']}]},
                        'BTOS',
                        'Roto'
                    ],
                    [' ',' ', ' ', {stack:[{columns:['2222','3232','2']}]}, ' ',' ']]
            }
        },
        {margin:[0,10,0,0], text:[{text:'Observaciones: ', bold:true}, 'ASDASDASDAS']},
        {margin:[0,20,0,0], stack:[
            {columns:['CLIENTE', {text:' ',width:50}, 'Recibe Mercaderia']},
            {columns:['Entrega de Mercaderia', {text:' ',width:50}, 'Jefe de Bodega']},
            {columns:['M1212121 _____________________', {text:' ',width:50}, 'Milton Marroquin _____________________']},
            {columns:[' ', {text:'SELLO',width:50}, ' ']},
            {columns:['Visto Bueno', {text:' ',width:50}, 'Fecha: _____________________']},
            {columns:['Jefe de Produccion', {text:' ',width:50}, 'Hora: _____________________']},
            {columns:['Ing. Roberto Estrada_____________________', {text:' ',width:50}, 'Funcionario de Aduana _____________________']}
        ]}
    ]
};
var asdf = pdfMake.createPdf(dd);
asdf.open(); </script> </body> </html>

【问题讨论】：

标签： javascript html jsp pdfmake

【解决方案1】：

问题在于代码会自动尝试在弹出窗口中生成 PDF。如果弹出窗口被阻止，则会导致 pdfmake 脚本中出现错误（这对他们来说似乎是个大问题，应该更优雅地处理该错误）

我在本地尝试了您的代码，但失败了，但启用弹出窗口后，它按预期工作。我不确定是否有其他方法可以使用不依赖 window.open() 的库，但可能值得研究

pdfmake.js 中的问题代码在这里：

Document.prototype.open = function(message) {
    // we have to open the window immediately and store the reference
    // otherwise popup blockers will stop us
    var win = window.open('', '_blank');

    try {
        this.getDataUrl(function(result) {
            win.location.href = result;
        });
    } catch(e) {
        win.close();
        throw e;
    }
};

如果您想要快速解决方案，请下载该脚本，将其托管在本地，然后将上述部分更改为：

Document.prototype.open = function(message) {
    // we have to open the window immediately and store the reference
    // otherwise popup blockers will stop us
    //var win = window.open('', '_blank');

    try {
        this.getDataUrl(function(result) {
          document.querySelector('iframe').src = result;
        });
    } catch(e) {
        win.close();
        throw e;
    }
};

然后，您只需要页面上的某个 iframe，您可以将 document.querySelector('iframe') 替换为对该特定框架的特定引用。找到一种方法让它工作而不像那样编辑包含可能仍然更好，但它至少证明弹出窗口确实是源问题。

【讨论】：

@lennin92 我不确定是什么仍然会导致错误。我将您的确切代码示例复制到本地 html 文件中，它按预期工作。如果在尝试调用 asdf.open() 之前将 asdf 登录到控制台会发生什么
@lennin92 我还更新了我的答案以包含问题的潜在解决方案
@jmcgriz 当然。这只是我的意见。我是从评论中做到的，对我来说，这似乎更像是一个评论而不是一个解决方案。从那时起，您似乎已经通过示例将其更新为更清晰的答案。我会删除评论。
@AtheistP3ace 很公平，谢谢。我最初犹豫是否提供该解决方案，因为修改库通常不是一个好主意，但这是启动并运行该代码的最快方法。