PDF creation

使用此库,可以创建不同样式的pdf文档.
我的问题是,是否有可能使用AngularJS标记现有pdf文件的文本(并且可能添加指向此标记文本的链接)？
或者有任何解决方法吗？

无论如何,首先要到达正确的页面 – 您可以使用超链接中的片段标识符通过页面参数链接到PDF中的特定页面.例如

<a href="file.pdf#page=1">page 1</a>
<a href="file.pdf#page=2">page 2</a>

如果要通过超链接突出显示页面的特定部分,可以使用突出显示参数,请注意您还必须将页面设置为使用突出显示参数.例如

<a href="file.pdf#page=1&highlight=10,10,50,50">page 1 - highlight</a>

矩形值是坐标系中的整数,其中0,0表示左上角,值以lt,rt,top,btm的顺序给出.

也可以通过nameddest参数打开PDF文件到“命名目的地”,即文档中的命名部分.例如

<a href="file.pdf#nameddest=mysection">my section</a>

这很好,因为插入,删除页面无关紧要,因为该部分将始终正确链接.

你可以阅读约Named Destinations here和various Parameters for Opening PDF Files

我正在使用来自以下网址的angular-bootstrap-datetimepicker库：
Link to library

我目前正在页面上嵌入日历.
我正在使用angular.js,moment.js,grunt和bower.加载日历绝对没有问题,甚至可以选择日期并显示所选日期.

以下是示例代码：

<div>
  Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}
  <datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day',minView:'day'}" />
</div>

我想在datetimepicker在页面上显示时自动突出显示今天的日期.
如您所见,在配置选项中,我可以设置默认视图和最小视图.

注意：我试图模仿Plunkr中的工作代码(到现在为止),但它没有显示日历.我也添加了所有库.无论如何,这只是为了想法.如果我能让Plunkr工作,我会再次更新.
这是Plunkr的链接.

任何建议(关于默认今天突出显示日期)将不胜感激.

$scope.data = { embeddedDate: new Date() };

Working Plunkr

<p ng-bind-html="myHTML"></p>   


app.controller('customersCtrl',function($scope,$http,$stateParams) {
    console.log($stateParams.id);
    $http.get("api link"+$stateParams.id)
    .then(function(response) {
      $scope.myHTML = response.data.content;

        // this will highlight the code Syntax
        $('pre code').each(function(i,block) {
            hljs.highlightBlock(block);
        });
    });
});

当屏幕上显示数据时,我想运行

$('pre code').each(function(i,block) {
      hljs.highlightBlock(block);
});

用于突出显示数据中的代码语法但不突出显示. (我使用@L_301_0@突出显示代码语法)

如果我在1秒后延迟加载突出显示代码,它会起作用,但我认为这不是一个好的解决方案

setTimeout(function () {
    $('pre code').each(function(i,block) {
        hljs.highlightBlock(block);
    });
  },1000);

我想也许在ng-bind-html完成之前运行的高亮代码.

===
UPDATE
我正在使用$timeout,延迟时间为0,因为有人推荐.但是,有时当网络速度较慢且页面加载速度较慢时,代码将不会突出显示.

$scope.myHTML = response.data.content;
$timeout(function() {
  $('pre code').each(function(i,block) {
      hljs.highlightBlock(block);
  });
},0);

模板：

<div ng-model="myHTML" highlight></div>

指示：

.directive('highlight',[
    function () {
        return {
            replace: false,scope: {
                'ngModel': '='
            },link: function (scope,element) {
                element.html(scope.ngModel);
                var items = element[0].querySelectorAll('code,pre');
                angular.forEach(items,function (item) {
                    hljs.highlightBlock(item);
                });

            }
        };
    }
]);

示例：http://plnkr.co/edit/ZbcNgfl6xL2QDDqL9cKc?p=preview