当前位置:   article > 正文

base64格式的图片和base64格式的pdf如何预览_后端返回base64的pdf文件预览鸿蒙

后端返回base64的pdf文件预览鸿蒙

1.base64格式的图片:

重点:"data:image/png;base64,"

  1. 首先获取从后端返回的base64图片码
  2. 字符串"data:image/png;base64,"与base64图片码值连接
  3. 将重新组装的字符串值付给src
//base64Img是后端返回的base64图片码,需要前端自己转成图片
let base64Img = "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"
let srcImg = "data:image/png;base64," + base64Img
<img :src="srcImg" title="这里是title"/>
  • 1
  • 2
  • 3
  • 4

结果如图所示:在这里插入图片描述

2.base64格式的pdf

重点:"data:application/pdf;base64"

可以使用iframe显示pdf,也可以使用vue-pdf插件显示pdf,也可以使用pdfJs

  1. 使用iframe标签显示pdf来距离
<!--basedatapdf为base64编码-->
<iframe  :src="'data:application/pdf;base64,'+basedatapdf" width="100%" height="100%">
</iframe>
  • 1
  • 2
  • 3
  1. 使用vue-pdf插件预览在线pdf
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/256169
推荐阅读
相关标签
  

闽ICP备14008679号