关于embed标签显示pdf（angularjs为前端）

最近的业务是在页面上显示的图片必须支持pdf。

首先用iframe标签来支持pdf，但由于ifame标签放到html页面上样式不是很兼容,获取内嵌元素很麻烦。

<iframe id="iframe1" name="mainIframe" src="https://10.193.10.150/FileUpload/ANDON/%E6%80%BB%E8%A3%85%E8%A3%85%E9%85%8D%E6%8C%87%E7%A4%BA/T1-04L-1%20%E6%8B%86%E5%B7%A6%E4%BE%A7%E5%89%8D%E8%BD%A6%E9%97%A8.pdf" style="width:98%;height:95%;background-size:contain" frameborder="0" scrolling="auto" allowfullscreen="true"></iframe>

就选用了html5支持的embed标签（万能标签）功能很强大，可以支持视频，音频。

参考链接（关于embed）

但放到项目中却不起作用，代码如下：

          <embed ng-src="{{data.imgSrc}}" style="width:100%;height:100%" width="100%" height="100%" align="left"/>

angularjs 的地址在这上面解析不了！！！

然后经过不懈的百度，终于发现需要用angularjs的自定义指令将embed-src处理，代码如下：

// 指令
.directive('embedSrc', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var current = element;
        scope.$watch(function () { return attrs.embedSrc; }, function () {
          var clone = element
            .clone()
            .attr('src', attrs.embedSrc);
          current.replaceWith(clone);
          current = clone;
        });
      }
    }
  })

最后确定的前端代码

 <embed embed-src="{{data.imgSrc}}" style="width:100%;height:100%" width="100%" height="100%" align="left"/>

本来以为大功告成，但甲方又不要embed自带的下载等标签功能，需要去掉！又要调查！！！

又费了九牛二虎的查百度（真难找），终于找到在pdf地址后将embed的标签参数强制为0，即可解决：

感谢参考链接1，，，感谢参考链接2

总与大功完成！！！