使用pdfmake在angularjs中生成pdf时未显示图像
Image not showing when generating pdf in angularjs using pdfmake
我正在使用pdfmake,这是一个很好的javascript pdf打印库,可以在我的angularjs SPA中生成pdf。当我只使用文本时,一切都很好。pdf文件显示正确,所有文本都已就位。但当我试图展示图像时,它对我不起作用。没有错误,没有空的pdf,只是什么都没发生。也没有404。
这是我现在正在尝试的代码,
var dd = {
content: [
{
image: 'picture13438908025659.jpg'
},
{
text: 'Patient''s Detail', fontSize: 18, bold: true
},
{
columns: [
{
text: 'Patient''s ID: ' + $scope.prescription.Patient[0].id, bold: false
},
{
text: 'Name: ' + $scope.prescription.Patient[0].name, bold: false
},
{
text: 'Age: ' + $scope.prescription.Patient[0].age, bold: false
},
{
text: 'Contact: ' + $scope.prescription.Patient[0].contact, bold: false
}
]
},
{
text: 'Address: ' + $scope.prescription.Patient[0].address, bold: false
}
]
}
它很简单,
1) 在此处将您的图像转换为base64
2) 复制你的base64代码并替换到
image : 'base64', // use your base64 instead image.jpg
3) 完成。这种方法是,如果你的图像不是通过链接处理的,请使用base64代替
您可以轻松地将任何图像转换为base64格式,根据文档,这是首选格式。这是一个100%的工作代码:
function convertImgToBase64URL(url, callback, outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
在这之后,你只需在你的pdf创建代码中提及它
var docDefinition = {
content: [
{
// you'll most often use dataURI images on the browser side
// if no width/height/fit is provided, the original size will be used
image: 'data:image/jpeg;base64,...encodedContent...'
}]
您首先需要将图像转换为base64,然后可以在图像属性中使用它,就像这个
{
image: 'data:image/jpeg;base64,...encodedContent...',
width: 75,
height: 75,
alignment : 'left'
}
以下是参考资料-https://pdfmake.github.io/docs/0.1/document-definition-object/images/
您能在图像对象中添加width:your_required_width
并检查是否有效吗?这也发生在我身上,我发现图像分辨率太大,PDFMake只是显示了原始尺寸的图像,无法容纳标准尺寸的纸张。为了将来使用PDFMake游乐场来创建文档定义对象,它非常方便。
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 有时数据是't显示在浏览器中
- 当鼠标悬停在文本中的单词上时显示警报
- 角度图表;t显示在我的页面中
- 显示图工具提示显示x轴的最后日期值,而不是当前值