0

当谈到 javascript 时，我是一个完全的新手。我想使用 pdfmake 以便我可以将我的 html 页面的输出保存在 pdf 中。以下是我遵循的确切步骤。

  1. 将 pdfmake.min.js 和 vfs_fonts.js 复制到名为 build 的目录中。我从https://github.com/bpampuch/pdfmake得到了这段代码。我下载了 zip 文件并复制了上述文件。
  2. 以下是我正在使用的代码：
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>

<script src="build/pdfmake.min.js"></script>
<script src="build/vfs_fonts.js"></script>
</head>
<body>

<script type="text/javascript" >
var docDefinition = { content: 'This is an sample PDF printed with pdfMake'     };
pdfMake.createPdf(docDefinition).open('test.pdf');
</script>

我在这里做错了什么？将不胜感激任何帮助。

原帖：makepdf javascript问题 浏览器尝试：Firefox，chrome和safari

4

2 回答 2

0

这是我的解决方案，它适用于所有浏览器。jsfiddle 中相同的链接是https://jsfiddle.net/krishnatcs1859/aey8Lhz7/3/。进入 jsfiddle 链接后，单击运行。您应该会看到下载到您机器上的 pdf

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js" integrity="sha512-gYUM+7JjtBqPPGOgwgOZ+NwjGl+11/EP124oB+ihjlBpLgP5LTh7R/Iwcdy//cgH+QzrjspBiJI5iUegTNww3w==" crossorigin="anonymous"></script>    
    <!-- Give the reference of your pdf content javascript file if any -->
     <script type="text/javascript">
     
     // var particpantName = document.getElementById('hdnParticipantName').value;
// var signedDate = document.getElementById('hdnSignedDate').value;
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = mm + '/' + dd + '/' + yyyy;

var usercertificateDD = {
    pageOrientation: 'landscape',
    pageSize: 'LETTER',
    background: [

        {
            svg: '<svg width="159.5" height="153.139" viewBox="0 0 159.5 153.139"><path id="Intersection_1" data-name="Intersection 1" d="M25.02,204.885C7.758,177.946-.408,146.962,4.329,114.5H30.037a113.537,113.537,0,0,0-1.254,14.457C27.34,182.2,65.469,229.82,117.239,240.224A108.481,108.481,0,0,0,162.5,240.1v25.533a125.194,125.194,0,0,1-22.293,2C97.434,267.64,55.014,245.781,25.02,204.885ZM58.573,190.9c-16.894-23.394-22.831-50.729-18.207-76.4H65.993a72.587,72.587,0,0,0,12.246,62.213C97.41,203.259,130.729,213.684,162.5,203v27.039a90.514,90.514,0,0,1-22.8,2.885C109.118,232.923,78.116,217.961,58.573,190.9Zm57.58-1.49c-11.47-3.816-19.754-11.839-27.522-20.873-5.828-9.795-11.141-20.6-11.153-32.681-.068-4.4-1.541-11.614,5.68-11.1,1.376.1,2.849.081,4.344.063,6.348-.074,13.081-.148,14.415,8.676,2.321,16.142,9.875,26.6,24.474,33.889,9.53,4.579,4.172,13.535,2.5,19.834-.875,3.579-2.715,4.713-4.882,4.713C121.5,191.935,118.548,190.413,116.153,189.409Z" transform="translate(-3 -114.5)" fill="rgba(241,241,241,0.53)"/></svg>',
            alignment: 'right',
            width: 250


        },
        {
            svg: '<svg width="159.5" height="153.139" viewBox="0 0 159.5 153.139"><path id="Intersection_1" data-name="Intersection 1" d="M25.02,204.885C7.758,177.946-.408,146.962,4.329,114.5H30.037a113.537,113.537,0,0,0-1.254,14.457C27.34,182.2,65.469,229.82,117.239,240.224A108.481,108.481,0,0,0,162.5,240.1v25.533a125.194,125.194,0,0,1-22.293,2C97.434,267.64,55.014,245.781,25.02,204.885ZM58.573,190.9c-16.894-23.394-22.831-50.729-18.207-76.4H65.993a72.587,72.587,0,0,0,12.246,62.213C97.41,203.259,130.729,213.684,162.5,203v27.039a90.514,90.514,0,0,1-22.8,2.885C109.118,232.923,78.116,217.961,58.573,190.9Zm57.58-1.49c-11.47-3.816-19.754-11.839-27.522-20.873-5.828-9.795-11.141-20.6-11.153-32.681-.068-4.4-1.541-11.614,5.68-11.1,1.376.1,2.849.081,4.344.063,6.348-.074,13.081-.148,14.415,8.676,2.321,16.142,9.875,26.6,24.474,33.889,9.53,4.579,4.172,13.535,2.5,19.834-.875,3.579-2.715,4.713-4.882,4.713C121.5,191.935,118.548,190.413,116.153,189.409Z" transform="translate(-3 -114.5)" fill="rgba(241,241,241,0.53)"/></svg>',
            alignment: 'left',
            margin: [20, -240, 20, 20],
        },
        {
           svg: '<svg width="159.5" height="153.139" viewBox="0 0 159.5 153.139"><path id="Intersection_1" data-name="Intersection 1" d="M25.02,204.885C7.758,177.946-.408,146.962,4.329,114.5H30.037a113.537,113.537,0,0,0-1.254,14.457C27.34,182.2,65.469,229.82,117.239,240.224A108.481,108.481,0,0,0,162.5,240.1v25.533a125.194,125.194,0,0,1-22.293,2C97.434,267.64,55.014,245.781,25.02,204.885ZM58.573,190.9c-16.894-23.394-22.831-50.729-18.207-76.4H65.993a72.587,72.587,0,0,0,12.246,62.213C97.41,203.259,130.729,213.684,162.5,203v27.039a90.514,90.514,0,0,1-22.8,2.885C109.118,232.923,78.116,217.961,58.573,190.9Zm57.58-1.49c-11.47-3.816-19.754-11.839-27.522-20.873-5.828-9.795-11.141-20.6-11.153-32.681-.068-4.4-1.541-11.614,5.68-11.1,1.376.1,2.849.081,4.344.063,6.348-.074,13.081-.148,14.415,8.676,2.321,16.142,9.875,26.6,24.474,33.889,9.53,4.579,4.172,13.535,2.5,19.834-.875,3.579-2.715,4.713-4.882,4.713C121.5,191.935,118.548,190.413,116.153,189.409Z" transform="translate(-3 -114.5)" fill="rgba(241,241,241,0.53)"/></svg>',
            alignment: 'left',
            margin: [20, 500, 20, 20],
            width: 150,

        },
        {
            svg: '<svg width="159.5" height="153.139" viewBox="0 0 159.5 153.139"><path id="Intersection_1" data-name="Intersection 1" d="M25.02,204.885C7.758,177.946-.408,146.962,4.329,114.5H30.037a113.537,113.537,0,0,0-1.254,14.457C27.34,182.2,65.469,229.82,117.239,240.224A108.481,108.481,0,0,0,162.5,240.1v25.533a125.194,125.194,0,0,1-22.293,2C97.434,267.64,55.014,245.781,25.02,204.885ZM58.573,190.9c-16.894-23.394-22.831-50.729-18.207-76.4H65.993a72.587,72.587,0,0,0,12.246,62.213C97.41,203.259,130.729,213.684,162.5,203v27.039a90.514,90.514,0,0,1-22.8,2.885C109.118,232.923,78.116,217.961,58.573,190.9Zm57.58-1.49c-11.47-3.816-19.754-11.839-27.522-20.873-5.828-9.795-11.141-20.6-11.153-32.681-.068-4.4-1.541-11.614,5.68-11.1,1.376.1,2.849.081,4.344.063,6.348-.074,13.081-.148,14.415,8.676,2.321,16.142,9.875,26.6,24.474,33.889,9.53,4.579,4.172,13.535,2.5,19.834-.875,3.579-2.715,4.713-4.882,4.713C121.5,191.935,118.548,190.413,116.153,189.409Z" transform="translate(-3 -114.5)" fill="rgba(241,241,241,0.53)"/></svg>',
            alignment: 'left',
            margin: [20, -15, 20, 20]

        }
    ],

    content: [
        {
            svg: '<svg width="159.5" height="153.139" viewBox="0 0 159.5 153.139"><path id="Intersection_1" data-name="Intersection 1" d="M25.02,204.885C7.758,177.946-.408,146.962,4.329,114.5H30.037a113.537,113.537,0,0,0-1.254,14.457C27.34,182.2,65.469,229.82,117.239,240.224A108.481,108.481,0,0,0,162.5,240.1v25.533a125.194,125.194,0,0,1-22.293,2C97.434,267.64,55.014,245.781,25.02,204.885ZM58.573,190.9c-16.894-23.394-22.831-50.729-18.207-76.4H65.993a72.587,72.587,0,0,0,12.246,62.213C97.41,203.259,130.729,213.684,162.5,203v27.039a90.514,90.514,0,0,1-22.8,2.885C109.118,232.923,78.116,217.961,58.573,190.9Zm57.58-1.49c-11.47-3.816-19.754-11.839-27.522-20.873-5.828-9.795-11.141-20.6-11.153-32.681-.068-4.4-1.541-11.614,5.68-11.1,1.376.1,2.849.081,4.344.063,6.348-.074,13.081-.148,14.415,8.676,2.321,16.142,9.875,26.6,24.474,33.889,9.53,4.579,4.172,13.535,2.5,19.834-.875,3.579-2.715,4.713-4.882,4.713C121.5,191.935,118.548,190.413,116.153,189.409Z" transform="translate(-3 -114.5)" fill="rgba(241,241,241,0.53)"/></svg>',
            alignment: 'center',
            margin: [20, 50, 10, 10],
            width: 50,

        },
        {
            text: "Hello",
            margin: [0, 0, 0, 0]


        },
        {
            text: "Man",
            style: ['boldBlueText', 'xlSize'],
            margin: [0, 20, 0, 0]
        },
        {
            text: "This is krishna ..Jus wanna let you know that you have ",
            margin: [0, 20, 0, 20]

        },
        {
            text: "just" ,
            style: ['boldBlueText', 'lgSize']

        },
        {
            text: "downloaded the pdf document on " + today + ".",
            margin: [0, 20, 0, 20]

        },

    ],
    styles: {
        boldBlueText: {
            color: '#2F418E',
            bold: true
        },
        xlSize: {
            fontSize: 50,
        },
        lgSize: {
            fontSize: 37,
        }
    },
    defaultStyle: {
        alignment: 'center'
    }

};

//red=#AD2430
//blue=#2F418E
//gray=#E7E6E6
//darkgray=#939598
     </script>  
</head>
<script>
    function renderPDF(dd) {
        const createPdf  = pdfMake.createPdf(dd);
        var base64data = null;
        <!-- var participantName = document.getElementById('hdnParticipantName').value; -->
        createPdf.getBase64(function (encodedString) {
            base64data = encodedString;           
            var byteCharacters = atob(base64data);
            var byteNumbers = new Array(byteCharacters.length);
            for (var i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            var file = new Blob([byteArray], { type: 'application/pdf;base64' });
            //var fileURL = URL.createObjectURL(file);            
            if (window.navigator.msSaveBlob) {
                window.navigator.msSaveBlob(file, 'UserCertificate.pdf');
            } else {
                saveAs(file, 'UserCertificate.pdf');
            }
        });
    }
    pdfMake.fonts = {
        Roboto: {
            normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
            bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
            italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
            bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
        },
    }
    renderPDF(usercertificateDD);
</script>
</html>
于 2021-05-10T04:36:22.983 回答
0
  • 将脚本链接到事件
  • 包括方括号

试试下面的代码：

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>

    <script src="../js/pdfmake.min.js"></script>
    <script src="../js/vfs_fonts.js"></script>

    <script type="text/javascript">

        function printpdf() {
            var docDefinition = {
                content: [
                    'First paragraph',
                    'Another paragraph'
                ]
            }
            pdfMake.createPdf(docDefinition).open('test.pdf');
        }

    </script>
</head>

<body>
<button id="make_pdf">Open PDF</button>
<script>document.getElementById('make_pdf').onclick = printpdf ;</script>
</body>
</html>

编辑 1：删除了内联 onclick 事件处理程序

于 2016-01-21T20:41:10.877 回答