如何把HTML页面(带跨域Iframe)页面转化成pdf格式的文件?

#需求:在移动端打开的网页中,标题头部是项目自己的内容,蓝色区域是跨域引用的iframe显示的图片和文字内容,需要把整篇文章保存成多个图片,进而转换成pdf文件存储。

img

#问题:因为跨域没有获取到iframe的dom,保存的pdf中iframe引用的内容变成空白,没有存到pdf中
#请大家帮忙给个解决办法,java开发实现

如果是要通过dom获取某一部分来保存为pdf的话,肯定不可以了,是无法操作跨域的dom的,可以抓取到html(就是iframe包含的是你自己的页面,而这个页面的html是你抓取那个页面的html),然后再通过操作dom实现

前端有个pdf.js的插件,可以看看

是否可以换一种处理方式,比如说用图文识别记录获取内容,各大厂商都有api

这篇文章有详细的介绍,希望能帮助到你 https://blog.csdn.net/web_houzhanguo/article/details/110491695

html2canvas+jsPDF
https://m.php.cn/article/475012.html

vue项目使用pdf.js插件实现pdf预览功能
https://blog.csdn.net/weixin_41207479/article/details/127031064

不太可能

方法一:word实现法

1这里推荐使用的word版本为word2007或者2010版本。word2003的效果可能跟原来的网页会有差别

2e471fa860eb2d6253105437fabf8a8e.png

2首先,我们拖拽鼠标,选择网页中我能需要保存成文档的内容。右击选择复制

12798c6143ca02d068540d8e7e1ffeb9.png

3打开一个新建的word文档命名为“百度一下,你就知道”。右击鼠标,选择保留原格式粘贴

8ef4a5864e6f5f2ad8e88a6ee57516c1.png

4点击保存按钮。点击文件,打印。在打印机位置选择PDF。点击打印

11229f236c386545f7b0aada069b3116.png

5在新弹出页面选择保存路径,点击保存即可

fa445743aabb8d85f92d93b3b40075d6.png

6当然,除了第四个步骤这种方法以外,我们也可以右击word文档,选择转化为PDF。我们下了来讲第二种方法

将网页内容转化为PDF方法二:网页转化法

1在打开的网页中,一次点击文件,另存为。总之找到可以保存网页的命令按钮,点击保存网页

1ddb0677cfa2b34ac57abbeba5a7bd30.png

2在弹出保存菜单中选择保存类型为“网页,仅HTML”选项,点击保存。

595081d8a069e8f4335b85dcfc4651e6.png

3好了,现在找到我们的网页文件,右击选择转化为Adobe PDF 即可。O(∩_∩)O哈哈~

df5dd7ed5ed0dc051beab4ca6d557ea6.png

将网页内容转化为PDF方法三:直接PDF法

如果你现在打开的网页不是使用IE浏览器的话,复制网页地址到IE浏览器打开。我们以百度首页为例

de0bb9719971658381b2108221a15ba4.png

由于现在的IE制作的比较简约,一些工具比如PDF我们都看不到它们了。所以在窗口最上方的空白处右击,把PDF按钮调出来

然后在弹出的窗口IE会问是否允许加载,点击启用

68b2efb992f9c1d3e562048e87974d7c.png

6a79bcbf642b4171a6cb95a495440f1c.png

然后我们发现在浏览器右上角出现了两个PDF按钮图标

2b530e5e282656bf31e6fe08ce632623.png

点击转换按钮,马上我们的页面就转化为PDF格式文档可以保存了。如果点击【选择】按钮的话,我们需要拖拽鼠标选择需要转化的对象或元素,再点击转换按钮完成转换

1b761135e7328ac13cfb8734137b2bf8.png

来看看我们最后转化完成的文档。后一个图是PDF文档的效果

2ca00a2e603c8b779f31c01c3088840c.png

如有帮助,请采纳谢谢