如何将图像与pdfmake对齐？
如何将图像与pdfmake对齐？
提问于 2016-01-21 23:40:48
我使用pdfmake创建PDF，并成功地使用数据URI嵌入图像。这是一个很小的图像，大约200 to，我想让它正确地对齐。有没有办法把图片推到PDF的右边？
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-01-25 05:26:22
可以在文档定义中使用预定义的样式对齐图像。pdfmake游乐场有一个很好的图片示例，我在下面编辑了它，以添加“右对齐”样式(称为“right to”)。我尝试直接在文档定义中添加“对齐:对”，但这是行不通的。
I由于长度删除了图像数据-请访问pdfmake游乐场图像以查看此操作：
var dd = {
content: [
'pdfmake (since it\'s based on pdfkit) supports JPEG and PNG format',
'If no width/height/fit is provided, image original size will be used',
{
image: 'sampleImage.jpg',
},
'If you specify width, image will scale proportionally',
{
image: 'sampleImage.jpg',
width: 150
},
'If you specify both width and height - image will be stretched',
{
image: 'sampleImage.jpg',
width: 150,
height: 150,
},
'You can also fit the image inside a rectangle',
{
image: 'sampleImage.jpg',
fit: [100, 100],
pageBreak: 'after'
},
// Warning! Make sure to copy this definition and paste it to an
// external text editor, as the online AceEditor has some troubles
// with long dataUrl lines and the following image values look like
// they're empty.
'Images can be also provided in dataURL format...',
{
image: **'IMAGE TRUNCATED FOR BREVITY'**,
width: 200,
style: 'rightme'
},
'or be declared in an "images" dictionary and referenced by name',
{
image: 'building',
width: 200
},
],
images: {
building: **'IMAGE DATA TRUNCATED FOR BREVITY'**
},
styles:{
rightme:
{
alignment: 'right'
}
}
}Stack Overflow用户
发布于 2018-04-23 03:52:52
下面的代码演示了图像的左(默认)、中间和右。
将下面的代码粘贴到http://pdfmake.org/playground.html中以进行活动视图。
操场要求将文档定义赋值给名为dd的变量。
var dd = {
content: [
'left align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'left' // Default... not actually required.
},
' ', ' ', 'center align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'center'
},
' ', ' ', 'right align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'right'
}
]
}Stack Overflow用户
发布于 2016-08-29 10:23:27
$('#cmd').click(function () {
var img = document.getElementById('imgReq');
var empImage = img.getAttribute('src');
var docDefinition = {
pageMargins: [0, 0, 0, 0],
content: [
{
style: 'tableExample',
table: {
headerRows: 1,
body: [
[ {
image: 'building',
width: 195,
height: 185,
} ],
]
},
layout: {
hLineWidth: function(i, node) {
return (i === 0 || i === node.table.body.length) ? 0 : 0;
},
vLineWidth: function(i, node) {
return (i === 0 || i === node.table.widths.length) ? 0 : 0;
},
hLineColor: function(i, node) {
return (i === 0 || i === node.table.body.length) ? '#276fb8' : '#276fb8';
},
vLineColor: function(i, node) {
return (i === 0 || i === node.table.widths.length) ? '#276fb8' : '#276fb8';
},
paddingLeft: function(i, node) { return 0; },
paddingRight: function(i, node) { return 0; },
paddingTop: function(i, node) { return 0; },
paddingBottom: function(i, node) { return 0; }
}
}
],styles:{
tableExample: {
margin: [200, 74, 0, 0],
//alignment: 'center'
}
}, images: {
building: empImage
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34936514
复制相关文章
相似问题
腾讯云开发者
