我想创建一个PDF使用我的HTML pdfMake和Angular(我也试了jsPDF,不能让它无论是工作).我尝试在Angular控制器中使用以下代码:
var blob = new Blob([document.getElementById('exportable').innerHTML])
var docDefinition = {
content: [blob]
}
pdfMake.createPdf(docDefinition).open();
但是我收到以下错误:
无法识别的文档结构:{"_ margin":null}".
我的HTML由div中的两个简单表组成exportable.
如果有人知道这个问题的解决方案,或者从Angular获取HTML到PDF的其他方法,请帮助.
任何帮助都非常感谢!
我使用knockout/bootstrap/gulp 创建了一个简单的应用程序，它使用pdfMake.js 下载pdf。它在使用 VS2017 的调试模式下工作正常。发布并使用 gulp 后，运行时会出现此错误：在虚拟文件系统中找不到文件“Roboto-Regular.ttf”
注意：gulp 之后，所有的 JS 文件都在一个 script.js 文件中。
我尝试了很多东西，它在调试时总是有效，只要我运行 gulp，它就会给出错误。
我从这里尝试了 joepal1976 的解决方案（我对 require.config.js 中的依赖项做了什么）
有人建议 .pipe(uglify({ compress: { hoist_funs: false } })) 似乎没有帮助。
包含在 require.config 中，如下所示：
var require = {
baseUrl: ".",
paths: {
"jquery": "js-libs/jquery.min",
"bootstrap": "js-libs/bootstrap.min",
"crossroads": "js-libs/crossroads.min",
"hasher": "js-libs/hasher.min",
"knockout": "js-libs/knockout",
"knockout-projections": "js-libs/knockout-projections.min",
"signals": "js-libs/signals.min",
"text": "js-libs/text",
"vfs_fonts": "js-libs/vfs_fonts",
"pdfMake": "js-libs/pdfmake.min"
},
shim: {
"bootstrap": { deps: ["jquery"] },
'pdfMake':
{
exports: 'vfs_fonts'
},
'vfs_fonts':
{
deps: ['pdfMake'], …我正在使用pdfmake.我想格式化一个文档,他们在github和他们的操场上有很好的例子,但我想知道他们是否具有其中的所有功能.我觉得他们可能是其他属性,如切换字体,添加不同的样式元素或下划线 - 在示例中没有明确共享的内容.也许你所看到的就是你得到的东西,但我只是彻底地浏览了github页面并没有找到更详细的功能列表.似乎hella类似于html但它似乎没有相同的html/css样式功能,如果有更多的东西可以有人请指出它.
尝试在我的Angular 2(version = 4.2.x)项目中使用客户端pdf库pdfmake.
在.angular-cli.json文件中,我声明了这样的js:
"scripts": [
"../node_modules/pdfmake/build/pdfmake.js",
"../node_modules/pdfmake/build/vfs_fonts.js"
]
然后在app.component.ts中,我像这样使用它:
import * as pdfMake from 'pdfmake';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
pdf: any;
downloadPdf() {
let item = {firstName: 'Peter', lastName: 'Parker'};
this.pdf = pdfMake;
this.pdf.createPdf(buildPdf(item)).open();
}
}
function buildPdf(value) {
var pdfContent = value;
var docDefinition = {
content: [{
text: 'My name is: ' + pdfContent.firstName + ' ' + pdfContent.lastName + '.'
}]
}
console.log(pdfContent); …我正在尝试使用pdfmake增加pdf上的标题大小.
目前能够在页面的左侧和右侧获得标题,这是我想要的,但是当高度超过26时,图像消失,因为标题的空间有限.
如果你需要测试任何东西,试试我目前在pdfmake playground上的代码
请记住,您需要将所有这些代码复制并粘贴到"playground"上才能使其正常工作.
var dd = {
pageSize: 'LEGAL',
pageOrientation: 'landscape',
header: {
margin: 8,
columns: [{
table: {
widths: ['50%', '50%'],
body: [
[{
image: 'sampleImage.jpg',
width: 80,
height: 26,
}, {
image: 'sampleImage.jpg',
width: 80,
height: 26,
alignment: 'right'
}]
]
},
layout: 'noBorders'
}]
},
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines' …我正在使用 pdfmake 在 angular 应用程序中生成 PDF 文档，并且只是尝试使用 dataURL（在pdfmake docs之后）将图像添加到输出中。
var docDefinition = {
content: [
{
table: {
widths: ['*'],
body: [
[{text: 'Table text goes here', style: 'tableCellPadded'}]
]
},
},
{
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACHCAYAAADqQ...AABJRU5ErkJggg==",
width: 152
}
'...various other text lines go here...'
],
styles: {
header: {
bold: true,
fontSize: 14
},
tableCellPadded: {
margin: [0, 15, 0, 15],
bold: true,
fontSize: 14
},
note: {
fontSize: 16,
bold: true,
italics: true
}
}
};
但是，当我尝试打印文档时，在控制台中出现此错误： …
我正在使用pdfmake用javascript生成pdf.我正在尝试动态构建一个表,但不能正常工作,这是我的尝试
$.ajax({
type: "POST",
url: myURL,
success:function(data){
/* data has a format like :
*[{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-10-18","hora":"15:42","valor":"5000"},{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-10-18","hora":"14:21","valor":"7000"},{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-09-19","hora":"11:58","valor":"17000"}]
*/
var peajes = JSON.parse( data );
var body = [];
var titulos = new Array( 'PEAJE', 'RUTA', 'FECHA CRUCE', 'HORA', 'VALOR' );
body.push( titulos );
for (key in peajes)
{
if (peajes.hasOwnProperty(key))
{
var peaje = peajes[key];
var fila = new Array();
fila.push( peaje.peaje.toString() );
fila.push( peaje.ruta.toString() );
fila.push( peaje.fechaCruce.toString() );
fila.push( peaje.hora.toString() );
fila.push( peaje.valor.toString() …有没有办法使用pdfmake创建具有不同页面方向的多页PDF ？
为了简单起见,我想要这样的东西:
我用不同的方法尝试了很多次,但它总是影响到所有页面.
尝试使用JS API PdfMake构建PDF :
<script type="text/javascript" src="/app/js/vfs_fonts.js"></script>
<script type="text/javascript" src="/app/js/pdfmake.min.js"></script>
然后根据这个Helloworld,我运行:
var docDef={ content: 'This is an sample PDF printed with pdfMake' }
pdfMake.createPdf(docDef).download('optionalName.pdf');
我有这个错误:
未捕获的TypeError:无法读取未定义的属性'Roboto-Regular.ttf'
我正在使用PDFMake来创建具有预定义文档定义的pdf.在我的旧离子1项目中,我将编码的字符串传递给print函数,该函数工作正常.这是旧离子1的代码
var dd = $scope.createDocumentDefinition();
$timeout(function () {
var pdf = pdfMake.createPdf(dd);
pdf.getBase64(function (encodedString) {
console.log(encodedString);
$ionicLoading.hide();
window.plugins.PrintPDF.print({
data: encodedString,
type: 'Data',
title: 'Print Document',
success: function () {
console.log('success');
},
error: function (data) {
data = JSON.parse(data);
console.log('failed: ' + data.error);
}
});
});
}, 1000);
现在我正在将我的项目升级到Ionic 3,所以我尝试了相同的东西,但输出不同,这是我的新离子3代码.打印机打开但不是根据我的文档定义打印它只打印编码的字符串.
let printer_ = this.printer;
var dd = this.createDocumentDefinition();
var pdf = pdfMake.createPdf(dd);
pdf.getBase64(function (_encodedString) {
let options: PrintOptions = {
name: 'MyDocument'
};
console.log(JSON.stringify(pdf));
printer_.print(_encodedString, options).then((msg)=>{
console.log("Success",msg);
},(error) => {
console.log("Error", …