Angular UI Grid - 将图像导出为 pdf

2024-06-26

我想将图像添加到 pdf 的标题中。

我正在尝试添加已转换为 base64 的图像以导出 Pdf 标题。

 $scope.gmGrid.exporterPdfHeader = {
            margin: [30, 5, 30, 15],

                table: {    

                widths: [ '*', '*' ],

                body: [
                  [ 'MC #: ' + $scope.mc, 'Week Ending Date: ' + $scope.weekEndDate ],

                ], 

                  //ADD IMAGE
                    myImage:    'data:image/false;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAAAkCAYAAABSZHLHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozYzllOTA5MC00MTAyLTQ3ZGMtYWVlNy02MjQyZjY0ODNiN2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjhFMDBBNkE2QzQyMTFFNTk3NEQ4QjhGODU4MkQ4QjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjhFMDBBNjk2QzQyMTFFNTk3NEQ4QjhGODU4MkQ4QjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZjFjMTRhNTUtNDE5NC00MDFkLTlhOTQtYjc4MWRkZDg3OWQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNjOWU5MDkwLTQxMDItNDdkYy1hZWU3LTYyNDJmNjQ4M2I3ZSIvPiA8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',                 
                    width: 150,
                    height: 150,

              },     

            },

控制台中没有错误。不知道我错过了什么。任何帮助表示赞赏。

更新***

我在列中添加了 exporterPdfHeader 中的图像,但是当我这样做时,它不会显示正文中包含的标题。它仅显示图像和表格。

$scope.gridOptions.exporterPdfHeader ={

                    //title: 'test',

                    //LOGO TEST (causes the header to disappear..
                    columns: [{
                            image: 'data:image/false;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAAAkCAYAAABSZHLHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozYzllOTA5MC00MTAyLTQ3ZGMtYWVlNy02MjQyZjY0ODNiN2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjhFMDBBNkE2QzQyMTFFNTk3NEQ4QjhGODU4MkQ4QjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjhFMDBBNjk2QzQyMTFFNTk3NEQ4QjhGODU4MkQ4QjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZjFjMTRhNTUtNDE5NC00MDFkLTlhOTQtYjc4MWRkZDg3OWQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNjOWU5MDkwLTQxMDItNDdkYy1hZWU3LTYyNDJmNjQ4M2I3ZSIvPiA8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',
                            width: 150
                    }],

                    margin: [30, 5, 30, 15],
                    table: {
                    widths: [ '*', '*', '*' /*, '*'*/ ],

                    body: [

                           [ 'Region: ' + $scope.region, 'Group: ' + $scope.group, 'MC: ' + $scope.mc /*, 'The last one'*/ ],
                           [ 'District #: ' + $scope.district, 'Route #: ' + $scope.route, 'Week Ending Date: ' + $scope.weekEndDate, /*, 'Value 4' */],

                    ]
                  },



    };

这应该可以帮助您开始:

这是相关的 angularJS 代码:

$scope.export = function() {
  var exportData = [];
  var exportColumnHeaders = $scope.gridOptions.showHeader ? uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE) : [];
  angular.forEach($scope.gridApi.grid.rows, function(row) {
    if (row.visible) {
      var values = [];
      angular.forEach(exportColumnHeaders, function(column) {
        var value = row.entity[column.name];
        if (column.name == 'rentalCreditPercentTues') value = $filter('percentFilter')(value);
        values.push({
          value: value
        });
      });
      exportData.push(values);
    }
  });
  var content = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);
  content.pageMargins = [40, 80, 40, 60];
  pdfMake.createPdf(content).open();
};
$scope.gridOptions = {
  exporterPdfHeader: {
    margin: 20,
    columns: [{
      image: 'data:image/false;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAAAkCAYAAABSZHLHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozYzllOTA5MC00MTAyLTQ3ZGMtYWVlNy02MjQyZjY0ODNiN2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjhFMDBBNkE2QzQyMTFFNTk3NEQ4QjhGODU4MkQ4QjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjhFMDBBNjk2QzQyMTFFNTk3NEQ4QjhGODU4MkQ4QjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZjFjMTRhNTUtNDE5NC00MDFkLTlhOTQtYjc4MWRkZDg3OWQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNjOWU5MDkwLTQxMDItNDdkYy1hZWU3LTYyNDJmNjQ4M2I3ZSIvPiA8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',
      width: 150
    }]
  }
};

诀窍是使用以下命令在页眉中创建足够的空间pageMargins.

这是最重要的 Plunker,http://plnkr.co/edit/1rL7ZBPu9mPym8SEjMxe?p=preview http://plnkr.co/edit/1rL7ZBPu9mPym8SEjMxe?p=preview.

如果您需要更多帮助,请告诉我。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular UI Grid - 将图像导出为 pdf 的相关文章

  • 替换文本区域的文字

    我制作了一个 javascript 函数来将文本区域中的某些单词替换为其他单词 但它不起作用 我做了这个 function wordCheck var text document getElementById eC value var ne
  • 如何更改 uib-tabset 中每个选项卡的路由

    当我选择一个选项卡时 我希望更改 url 我应该为每个选项卡创建一个状态吗 这是我的代码 无需更改状态即可正常工作 我的应用程序 js var myApp angular module app ui router ngAnimate ui
  • 如何在 Jasmine JS 中重用 beforeEach/afterEach?

    当使用 JasmineJS 编写测试时 我有许多具有类似 beforeEach afterEach 代码的测试 有没有办法使用 JasmineJS 测试套件实现继承模型 我可以将所有测试分组为一个describe但在这种情况下 我将以包含所
  • $(document).ready 回调何时执行?

    假设我们附加一个 click http api jquery com click 锚点的处理程序 a 中的标签 document ready http api jquery com ready 打回来 该处理程序将取消默认操作 遵循href
  • 使用 mongoDB 插入子文档

    我收集了以下文件 id 2 workspace name 1 widgets name 2 widgets name 3 widgets name 4 widgets 我怎样才能插入 id 1 blabla blabla 在 小部件 中的
  • 将新数据添加到 d3 Streamgraph 时的转换

    我使用d3绘制了一个与官方示例非常相似的流图http bl ocks org mbostock 4060954 http bl ocks org mbostock 4060954 唯一的区别是我如何用新数据更新它 我不仅想要垂直 y 值 过
  • html/js 中从右到左和/或从上到下的文本?

    如何在浏览器中为用户输入创建从右到左和从上到下的文本字段 有没有本地方法可以做到这一点 或者也许有解决方法 从上到下可能像日语或象形文字 对于 RTL 文本字段 您可以使用 HTMLdir属性 如 ime Vidas 已经提到的 或 wit
  • 如何在 Chrome 中将 Set 转换为数组?

    如何将集合转换为数组 https stackoverflow com questions 20069828 how to convert set to array给出了将 Set 转换为 Array 的三个答案 目前在 Chrome 浏览器
  • Javascript CORS 图像/画布操作

    我正在尝试从另一个已配置为允许 CORS 的域检索图像 并操纵像素 然后我想显示结果并能够操纵结果 我可以在我请求的图像上使用 getImageData 和 toDataURL 所以我知道服务器部分可以工作 但是 当我尝试将图像的 src
  • 如何在 Google 地图上旋转叠加图像?

    我正在尝试将一系列叠加层放置到 Google 地图上 我正在跟随地面覆盖层的示例代码 https developers google com maps documentation javascript examples groundover
  • GraphQL 错误字段类型必须是输入类型,但得到:

    这是突变 const createNotebook mutationWithClientMutationId name CreateNotebook inputFields token type GraphQLString details
  • JQuery mouseover 函数多次触发

    我很长时间以来一直使用这种方法来为整个类 按钮等 设置事件 div bigButton mouseover function this style backgroundColor dfdfdf 然而 在进行一些测试时 我刚刚注意到 当将鼠标
  • iTextSharp 将图像缩放为整页

    我正在尝试将 PDF 文档中的图像缩放为整页 我正在使用 iTextSharp 生成文档 该图像具有正确的页面宽高比 但理想情况下我更希望图像扭曲而不是不填充所有可用区域 我目前有 Dim Document As New Document
  • 抓取 Shopee API v4

    我有一个最终项目 其中我想要检索的数据是通过在shopee上抓取数据来获取的 但是当我在隐藏的API上抓取shopee时遇到问题 当我在Insomnia脚本上尝试时 脚本会运行 但是当我尝试时在本地或 google colab 脚本上 这是
  • HTML 画布从 getImageData 返回“偏离一些”字节

    我找到getImageDataHTML 画布似乎返回不正确的字节值 我使用以下 Python 代码生成了 1x1 px 图像 from PIL import Image import numpy as np a np array 12 18
  • 多个引导模式的滚动问题

    我有一个带有大量信息的模态页面 因此您需要滚动 该模式包含指向第二个模式的链接 When I 打开模态 1 单击链接打开模式 2 模式 1 保持在后台 然后关闭模式 2 以便我回到模式 1 modal 1 失去滚动 仍然有一个滚动条 但它不
  • 将json数据从servlet传递到jsp到js文件

    我得到了这个创建 JSON 数据的 servlet 我想将此数据传递到一个 jsp 页面 该页面应该通过 InfoVis 工具包显示数据 servlet java JSONObject json new JSONObject JSONArr
  • 如何拦截javascript中innerHTML的变化?

    我需要拦截网页内单元格内容的任何更改 以下代码显示 addEventListener 不起作用 function modifyText alert var el document getElementById mycell el inner
  • 如何从索引文件迭代多个导入的模块

    我有一个名为Polygons我在那里创建了一个index jsfile 以导出目录中的所有文件 它看起来像这样 export default as europe from europe export default as northAmer
  • ASP.NET MVC3 Ajax.ActionLink - 条件确认对话框

    我有一个 Ajax ActionLink 仅当满足某些条件 用户有未保存的更改 时 我才希望显示一个确认对话框 我创建了一个 JavaScript 函数 它根据需要显示确认对话框 并根据响应返回 true 或 false 我将其绑定到 Ac

随机推荐

  • 使用字符串变量 **kwargs 作为命名参数

    我正在尝试找出一种方法来循环 json 配置文件并使用键名称作为使用 kwargs 的方法的参数名称 我创建了一个 json 配置文件并使用键名作为方法 我只需将 set 附加到键名称即可调用正确的方法 我将 json 转换为字典以循环遍历
  • 尝试将星号添加到必填输入字段

    我想我不太明白 before and after因为我无法让这个工作 我只是想在表单中的必填字段后添加一个星号 我的代码很简单
  • 如何在 Django 中每天精确执行一次命令?

    我正在开发一个基于 Django Web 的项目 在该项目中我需要构建一个按以下顺序工作的应用程序 1 用户打开一个页面 需要在其中输入command and a time 2 Django应用程序将在每天的给定时间执行该命令 直到用户关闭
  • Jquery - Fancybox - 后台页面移位问题

    Fancybox 加载良好 所有内容都按照我想要的方式打开 但问题发生在后台 可以看到 并且令人不安 当盒子加载并返回到盒子上的正常位置时 我的整个页面向右移动了 8 个像素关闭 我无法链接到该网站 因为它位于我们公司防火墙后面的开发服务器
  • 创建 UIImageView 的子类

    我还没有找到 UIImageView 在创建 Objective C 类期间从下拉列表中进行选择的选项 我使用的是 xcode 4 3 我想知道我们是否允许扩展 UIImageView 类 或者我必须继承 UIView 自定义 UIImag
  • 需要在 Coldfusion 9 上运行 JPA + Hibernate java 项目的建议

    我有一个使用 JPA 2 Hibernate 3 5 6 进行数据访问的 java 项目 它在 JBoss 应用程序服务器上运行得很好 现在我尝试在 Coldfusion 9 环境上运行它 我看到 CF 9 已经有了 hibernate3
  • 将记录与另一个表上的最新记录连接

    我正在尝试创建一个 SQL 视图 我如何从一个表中选择最新的记录 而其他记录保持原样 我需要从所有表中选择所有记录 这工作正常 但我需要仅按日期选择最新的提案 这是我遇到的问题 这是我到目前为止所拥有的 SELECT TOP 100 PER
  • 在 JavaScript(而非 JQuery)中自动设置电话号码格式

    我发现以下代码用于在 JavaScript 中格式化电话号码这篇文章来自堆栈溢出 https stackoverflow com questions 45471788 formatting the phone number for mult
  • 如何用python从客户端向服务器发送消息

    我正在阅读带有客户端和服务器的 Python 2 7 10 中的两个程序 如何修改这些程序以便从客户端向服务器发送消息 服务器 py usr bin python This is server py file import socket I
  • 后退按钮不会导致回发到 MVC 中的控制器操作

    当我在 Win7 上的 IE10 或 Chrome 中单击后退按钮时 它不会到达 MVC 控制器中的断点 IE 开发者工具中的 网络 选项卡显示 304 未修改 并且 Fiddler 未捕获该请求 我期待着回帖 这样我就可以在我的控制器中工
  • IHttpModule 和控制台应用程序的流畅 NHibernate 模式

    我目前有一个在存储库模式中使用 Fluent NHibernate LINQ 的 C MVC 2 Web 应用程序 并使用 Ninject 来处理 MVC 控制器的构造函数要求 将其传递到存储库中 我的 Fluent NHibernate
  • 即使单击“允许”后,也会出现“执行该操作需要授权”消息

    我最近遇到了一个授权新的 Google App Script 项目的问题 特别是使用 Cloud SQL 管理 API 的项目 相同的代码存在于之前授权的 GAS 项目中并且工作正常 但是如果我获取 GAS 项目的副本并尝试第一次运行某个函
  • 如何只处理某些 XML 节点?

    这是我的 XML 片段 它有一个根元素
  • 手风琴内的 ui bootstrap datepicker 不可见

    我正在尝试在手风琴内制作一个带有日期选择器的模块 问题是日期选择器弹出框在手风琴上不可见 这是一个显示问题的笨蛋 http plnkr co edit jBqU0LXQFcUuzQLency2 p preview http plnkr co
  • 为什么这段代码不交换数字? [复制]

    这个问题在这里已经有答案了 可能的重复 为什么这些交换函数的行为不同 https stackoverflow com questions 4330929 why do these swap functions behave differen
  • 如何消除错误 3002?

    假设我在 SQL Server 2008 中有以下表定义 CREATE TABLE Person PersonId INT IDENTITY NOT NULL PRIMARY KEY Name VARCHAR 50 NOT NULL Man
  • Mongoose 在结果的 _id 字段中返回“new ObjectId”

    当我尝试查询时 结果包含 id其中包含 new ObjectId 的字段 如何避免这种 new ObjectId 并仅将哈希值包含为字符串 由于此问题 将数据作为 JSON 响应发送回失败 下面是一个基本的demo 我的查询代码 book
  • 从 google 地图 api 隐藏本地列表

    当使用谷歌地图 API 显示某些内容时 谷歌已开始将当地餐馆 酒店添加到地图中 我怎样才能隐藏它们不出现 我在使用地图的网站 例如 yelp 上检查了相同的位置 他们成功地隐藏了当地的酒店 餐厅 我一直在寻找图层 叠加层 但无法弄清楚如何删
  • 仅选择一半记录

    我试图弄清楚如何选择 ID 为空的一半记录 我想要一半 因为我将使用该结果集来更新另一个 ID 字段 然后我将使用该 ID 字段的另一个值更新其余部分 所以本质上我想用一个数字更新一半记录 someFieldID 用另一个数字更新其余记录
  • Angular UI Grid - 将图像导出为 pdf

    我想将图像添加到 pdf 的标题中 我正在尝试添加已转换为 base64 的图像以导出 Pdf 标题 scope gmGrid exporterPdfHeader margin 30 5 30 15 table widths body MC