我正在尝试在离线网页中使用 pdfmake JS 库。 我从https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js下载了CDN文件并将其离线保存在..app/js/pdfmake.js
我使用 require 加载了库:
require([
'js/pdfmake.js',
...])
我使用下面的示例测试该库:
var buttonTS = document.getElementById("buttonTS")
butonTS.addEventListener("click", function(){
var docDefinition = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
};
var now = new Date();
var pdf = pdfmake.createPdf(docDefinition);
pdf.write('pdfs/basics.pdf').then(() => {
console.log(new Date() - now);
}, err => {
console.error(err);
});
}
但是库没有加载,并抛出错误:
Uncaught ReferenceError: pdfmake is not defined
这很奇怪,因为我有其他库(SweetAlert),它们可以正常工作。
感谢您的帮助!
这是一个您可以检查的工作示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"
integrity="sha512-a9NgEEK7tsCvABL7KqtUTQjl69z7091EVPpw5KxPlZ93T141ffe1woLtbXTX+r2/8TtTvRX/v4zTL2UlMUPgwg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.min.js"
integrity="sha512-P0bOMePRS378NwmPDVPU455C/TuxDS+8QwJozdc7PGgN8kLqR4ems0U/3DeJkmiE31749vYWHvBOtR+37qDCZQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="./pdfmake.min.js"></script>
<script src="./vfs_fonts.min.js"></script>
<script>
const docDefinition = {
pageSize: 'A4',
pageOrientation: 'landscape',
content: [
'Hey, it works'
],
pageMargins: [20, 5, 10, 5],
info: {
title: 'Some PDF Name',
author: 'Author Name',
},
defaultStyle: {
fontSize: 9,
bold: false,
}
}
const pdf = pdfMake.createPdf(docDefinition);
pdf.open({});
</script>
</html>
如果加载从cdn下载的lib。我还在评论中保留了实际的 CDN 链接。
这里的代码直接写在html文件的script标签内。如果您想将代码保存在单独的 js 文件中,请确保这些文件的脚本标记保留在 libs 之后
<script src="./pdfmake.min.js"></script>
<script src="./vfs_fonts.min.js"></script>
<script src="./index.js"></script>