无法让pdfmake为我工作
Cannot get pdfmake to work for me
说到javascript,我完全是个新手。我想使用pdfmake,这样我就可以将html页面的输出保存为pdf。以下是我所遵循的具体步骤。
- 已将pdfmake.min.js和vfs_fonts.js复制到名为build的目录中。我从https://github.com/bpampuch/pdfmake.我下载了zip文件并复制了上面的文件
- 以下是我正在使用的代码:
<!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
- 将脚本链接到事件
- 包括方括号
尝试以下代码:
<!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事件处理程序
这是我的解决方案,适用于所有浏览器。jsfiddle中的链接是https://jsfiddle.net/krishnatcs1859/aey8Lhz7/3/.进入jsfiddle链接后,单击run。你应该看到下载到你的机器的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>
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- 无法让pdfmake为我工作