pdf网络地址转iframe的src地址

最新推荐文章于 2023-09-20 22:19:46 发布

阿里嘎吧创始人

最新推荐文章于 2023-09-20 22:19:46 发布

阅读量209

点赞数

文章标签： pdf 前端 javascript

本文链接：https://blog.csdn.net/YAYTXT/article/details/128563235

版权

该代码示例展示了如何利用fetchAPI获取PDF文件，将其转化为blob对象，然后通过FileReader的readAsDataURL方法读取并转换为dataURL，最后将结果赋值给iframe的src属性以在页面中展示PDF文档。

摘要由CSDN通过智能技术生成

 fetch('http://www.lswz.gov.cn/html/ndbg/2019-03/28/243933/files/8cc8f0c824e74e3dbc06ac3e74355def.pdf')
.then( res => res.blob()) // 解析res值为blob
.then( response => {
  const reader = new FileReader();
  // 这里转换是异步的
  reader.readAsDataURL(response);
  // 绑定this
  const that = this;
  // 监听转换是否成功
  reader.addEventListener("loadend", function() {
      // reader.result 结果赋值给iframe的src属性
      that.setState({
        iframeSrc: reader.result
      })
  });
})
        <iframe
    src={`${ iframeSrc}`}
    style={{
      width: '100%',
      height: '100%',
    }}
  ></iframe>