vue将base64编码转为pdf方法

html 复制代码
<iframe width="100%" height="100%" src="" frameborder="0" id="iframe"></iframe>
html 复制代码
使用方法:
直接调用就行
viewPdf('传入base64编码即可')
clike 复制代码
  //content是base64编码格式
  const viewPdf =(content:any)=> {
    const blob = base64ToBlob(content);
    // @ts-ignore
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      // @ts-ignore
      window.navigator.msSaveOrOpenBlob(blob);
    } else {
      let iframe = document.getElementById("iframe")
      if(iframe){
        //我这里是用iframe嵌入的 
        // @ts-ignore
        iframe.src= URL.createObjectURL(blob);
      }
      // window.open(fileURL);// 打开ppf文件(如果不用iframe嵌入 打开新的页面 就可用window.open来打开)
    }
  }
  // 2.base转二进制文件流
  const base64ToBlob = (code:any)=> {
    code = code.replace(/[\n\r]/g, '');// 检查base64字符串是否符合base64编码
    // atob() 方法用于解码使用 base-64 编码的字符串。
    const raw = window.atob(code);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      // 将解码后的逐个字符转换成Unicode序号,放入Unit8Array数组
      uInt8Array[i] = raw.charCodeAt(i);
    }
    // 通过Blob将Uint8Array数组转换成pdf类型的文件对象
    return new Blob([uInt8Array], { type: 'application/pdf' });
  }
相关推荐
余生H几秒前
前端科技新闻(WTN-3)React v19 引发 Cloudflare 异常事件复盘 - 一次序列化升级,如何影响全球边缘网络?
前端·科技·react.js
HIT_Weston2 分钟前
62、【Ubuntu】【Gitlab】拉出内网 Web 服务:Gitlab 配置审视(六)
前端·ubuntu·gitlab
ID_180079054735 分钟前
淘宝关键词搜索 API 系列 数据返回参考(附解析与实战)
java·服务器·前端
Hao_Harrision14 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨| BackgroundSlider(背景滑块)
前端·typescript·react·vite7·tailwildcss
weixin_3077791321 分钟前
Jenkins Font Awesome API插件:现代化插件界面的图标引擎
开发语言·前端·自动化·jenkins
小小心LOVE27 分钟前
Vue3 安装和使用 vue-office来实现 Word、Excel 和 PDF 文件的预览
vue.js·word·excel
June bug29 分钟前
【Vue】从0开始使用Vue构建界面
前端·vue.js·前端框架
shuaijie051830 分钟前
在Vue.js中实现列表的拖动功能,使用第三方库如vuedraggable(基于Sortable.js)
android·javascript·vue.js
风月歌31 分钟前
小程序项目之驾校报名小程序源代码(java+vue+小程序+mysql)
java·vue.js·mysql·小程序·毕业设计·源码
IT_陈寒39 分钟前
SpringBoot3.0性能优化:这5个冷门配置让我节省了40%内存占用
前端·人工智能·后端