pdfmake.js Uncaught TypeError: Cannot read property 'length' of null

Question

未捕获类型错误：无法读取属性 'length' of null

当运行我的客户端计算机上的下一个 html/javascript 代码时，它在 playground 上运行，但我不知道错误是什么。

<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>

Answer 1

问题在于代码会自动尝试在弹出窗口中生成 PDF window。如果弹出窗口被阻止，则会导致 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') 替换为对该特定框架的特定引用。找到一种方法让它工作而不像那样编辑包含可能更好，但它至少证明弹出窗口确实是源问题。

pdfmake.js Uncaught TypeError: Cannot read property 'length' of null

pdfmake.js Uncaught TypeError: Cannot read property 'length' of null

javascript

html

jsp

pdfmake