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' });
  }
相关推荐
bearpping3 小时前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
@大迁世界4 小时前
07.React 中的 createRoot 方法是什么?它具体如何运作?
前端·javascript·react.js·前端框架·ecmascript
January12074 小时前
VBen Admin Select 选择框选中后仍然显示校验错误提示的解决方案
前端·vben
. . . . .4 小时前
前端测试框架:Vitest
前端
xiaotao1314 小时前
什么是 Tailwind CSS
前端·css·css3
战南诚5 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
发现一只大呆瓜5 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
霍理迪5 小时前
Vue的响应式和生命周期
前端·javascript·vue.js
李剑一5 小时前
别再瞎写了!Cesium 模型 360° 环绕,4 套源码全公开,项目直接用
前端