pdfmake.js Uncaught TypeError: Cannot read property 'length' of null
pdfmake.js Uncaught TypeError: Cannot read property 'length' of null
未捕获类型错误:无法读取 属性 'length' of null
当 运行 我的客户端计算机上的下一个 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>
问题在于代码会自动尝试在弹出窗口中生成 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')
替换为对该特定框架的特定引用。找到一种方法让它工作而不像那样编辑包含可能更好,但它至少证明弹出窗口确实是源问题。
未捕获类型错误:无法读取 属性 'length' of null
当 运行 我的客户端计算机上的下一个 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>
问题在于代码会自动尝试在弹出窗口中生成 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')
替换为对该特定框架的特定引用。找到一种方法让它工作而不像那样编辑包含可能更好,但它至少证明弹出窗口确实是源问题。