Angularjs 中用于 iframe 的打印功能

Posted 2023-02-27

【中文标题】Angularjs 中用于 iframe 的打印功能

【英文标题】：Print functionality in Angularjs for iframe

【发布时间】：2018-07-24 23:57:55

【问题描述】：

我必须打印iframe 中的特定文件。

我的 view_file.ejs：

<div id="viewframe"> 
<iframe id="viewfile"  name="viewfile" src='https://docs.google.com/viewer?url=<%= urlencode.encode(img) %>&embedded=true' style="width: 100%;height:900px" frameborder="0" scrolling="no" seamless="" allowfullscreen="allowfullscreen">
</iframe>
</div>

这里的 img（这是我在 urlencode.encode 中使用的变量）是来自 aws s3 存储桶的链接

打印按钮：

<div class="right_blk">
                    <span class="versions"><a ng-click="printdoc('viewframe')" href="javascript:void(0)" >Print</a></span>   
</div>

我的 app.js：

$scope.printdoc1=function(doc)


   window.frames["viewfile"].focus();
   window.frames["viewfile"].print();

我从这里尝试了许多解决方案，但对我没有任何作用。有什么办法吗？

更新

core.js:124 DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
    at b.$scope.printdoc (http://localhost:3000/js/docapp.js:46:32)
    at fn (eval at compile (http://localhost:3000/js/core.js:242:306), <anonymous>:4:162)
    at e (http://localhost:3000/js/core.js:287:342)
    at b.$eval (http://localhost:3000/js/core.js:150:347)
    at b.$apply (http://localhost:3000/js/core.js:151:52)
    at htmlAnchorElement.<anonymous> (http://localhost:3000/js/core.js:287:394)
    at HTMLAnchorElement.dispatch (http://localhost:3000/js/jquery-3.2.1.min.js:3:10316)
    at HTMLAnchorElement.q.handle (http://localhost:3000/js/jquery-3.2.1.min.js:3:8343)

我收到此错误。

【问题讨论】：

看看这个：***.com/questions/19637312/…

感谢您的回复@KishorVelayutham 链接源已仅在 iframe 中，并且也出现跨源错误

【参考方案1】：

<iframe id="viewfile"  name="viewfile" src='https://docs.google.com/viewer?url=<%= urlencode.encode(img) %>&embedded=true' style="width: 100%;height:900px" frameborder="0" scrolling="no" seamless="" allowfullscreen="allowfullscreen">

不要将 id 作为参数传递，而是这样做：

 <span class="versions"><a  ng-click="printdoc()" href="javascript:void(0)" >Print</a></span>

这就是你使用 Javascript 的方式：

function printdoc()

   document.getElementById("viewfile").contentWindow.print(); //Iframe id

如果是 Jquery：

$("#viewfile").get(0).contentWindow.print();

试试这个。希望对您有所帮助..！

【讨论】：

谢谢你..我会试试这个，让你知道

仍然收到此错误“阻止具有来源“localhost:3000”的框架访问跨域框架。”我已经用那个错误更新了我的问题

我认为它与安全有关。请点击此链接：***.com/questions/25098021/…。可能会解决您的问题。