Question

未捕获的TypeError：无法读取null的属性'length'

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

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

Answer 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')与特定帧的特定引用交换。如果没有像这样编辑包含，那么找到一种让它工作的方法仍然可能更好，但它至少证明了弹出窗口确实是源问题。

pdfmake.js未捕获的TypeError：无法读取null的属性“length”

1 个答案: