个人中心
gpt4 book ai didi

javascript - pdfMake javascript pdf内容放错位置

转载 作者：行者123 更新时间：2023-11-28 06:20:23 25 4
gpt4 key购买 nike

我有以下代码，我认为写得很好，但它总是将 pdf 内容渲染错位，

<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 = 210;
var bottom = 30;


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: "LOGO", width: 150, margin:0},
                {stack: [
                    {text: 'ENTERPRICE 1',fontSize: 14},
                    {text: 'Adress 1',fontSize: 12},
                    {text: '9999-999-99',fontSize: 12}
                ]},
                {stack: [
                    {text: 'ASDDS',fontSize: 11},
                    {text: '23/02/2016',fontSize: 11},
                    {text: usuario, fontSize: 11}],
                    alignment: 'right',
                    width: 85
                }
            ]
            },
            {
                margin: [25, 15, 0, 0],
                columns: ['ASDSDASDA', {text: 'SIMPLE', alignment: 'right'}]
            },
            {
                margin: [25, 10, 0, 0],
                columns: [
                    {   text: 'Fecha: 21/02/2016',
                        width: 150
                    },
                    {   text: 'Carta de Porte:'},
                    {   text: '4383',
                        alignment: 'left',
                        width: 100
                    }]
            },
            {
                margin: [25,5,0,0],
                columns:[
                    {text:[{text:'Cliente:',bold:true}, 'ASDASDV.']},
                    {text:[{text:'Deposito:',bold:true}, '995555']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Tipo :',bold:true}, 'CLASE 1']},
                    {text:[{text:'Proce:',bold:true}, 'ASDASD']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Fecha y hora de entrada del vehiculo de transporte:',bold:true}]},
                    '07/01/2016 14:52'
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Motorista:',bold:true}, 'CRISTIAN DANIEL VILLACORTA']},
                    {text:[{text:'Licencia No.',bold:true}, '-07092207871017']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Cia. de Transporte:',bold:true}, 'PROPIO-MAQUINARIA AGRICOL']},
                    {text:[{text:'Codigo de Transporte:',bold:true}, ' ']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Placa de vehiculo:',bold:true}, '103797']},
                    {text:[{text:'No. Marchamo:',bold:true}, 'MARC1']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Fecha de descarga:',bold:true}, '07/01/2016']},
                    {text:[{text:'Hora inicio:',bold:true}, '15:14'], width:85},
                    {text:[{text:'Hora fin:',bold:true}, '00:00'], width:85},
                    {text:[{text:'Ubicacion:',bold:true}, 'BODEGA 1']},
                    {text:[{text:'Muelle:',bold:true}, 'MUELLE 1']}
                ]
            },
            {
                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']}
                ]
            }
        ]
    },
    content: [
        {
            fontSize: 9,
            table:{
                headerRows:1,
                widths: [ 60, 60, 145, 135, 55, 55 ],
                body:[
                    [
                        'Codigo Mercaderia',
                        'Codigo Referencia',
                        'Descripcion Mercaderia',
                        {stack:['Cantidad de bultos', {columns:['Declarada', 'Recibida', 'Diferencia']}],alignment:
'center'},
                        'Unidad Medida',
                        'Estado Mercaderia'
                    ],[
                        '07951',
                        ' ',
                        'Equipo hidraulico industrial',
                        {stack:[{columns:['100','101','-1']}]},
                        'BTOS',
                        'Bueno'
                    ],[
                        '07951',
                        ' ',
                        'Equipo hidraulico industrial',
                        {stack:[{columns:['100','101','-1']}]},
                        'BTOS',
                        'Bueno'
                    ],[
                        '10094461 1',
                        ' ',
                        'Exhividores de piso',
                        {stack:[{columns:['150','150','0']}]},
                        'BTOS',
                        'Bueno'
                    ],
                    [' ',' ', ' ', {stack:[{columns:['5400','5404','-4']}]}, ' ',' ']]
            }
        },
        {margin:[0,10,0,0], text:[{text:'Observaciones: ', bold:true}, 'ASDASDASDAS']}
    ]
};
var asdf = pdfMake.createPdf(dd);
asdf.open(); </script> </body> </html>

代码应该创建一个带有标题和表格的 pdf，但它的打印方式如下: screenshot of the generated pdf

我用红色标记了放错位置的文本(它应该是一个表格)，我不知道为什么它总是把它放在那个地方。

最佳答案

问题是变量 left、right、top 和 Bottom 与作用域中的其他一些变量冲突，所以答案是重命名变量并替换它们的使用位置:

var _left = 25;
var _right = 25;
var _top = 210;
var _bottom = 30;

// [...] (inside dd object)
pageMargins: [left, top, right, bottom],

此替换后，pdf 已完美呈现

关于javascript - pdfMake javascript pdf内容放错位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35593042/

25 4 0
文章推荐： html - 我的 MAMP 本地主机仅在我的代码编辑器 Sublime Text 上运行一个元素
文章推荐： html - POCO HTMLForm 如何读取名称为 invoice[items][1] 的输入表单元素
文章推荐： c++ - 位标志作为验证例程中的输入
文章推荐： javascript - 禁用输入表单，直到加载数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com