首页 > 其他分享 >vue中将base64流数据转成pdf文件可打印

vue中将base64流数据转成pdf文件可打印

时间:2023-03-09 15:24:57浏览次数:37  
标签:vue const base64 content window pdf 打印

vue中将base64流数据转成pdf文件可打印

这次后端返参不是oss那边传回来的,而是传给我一串base64编码的字符串,让我去生成可打印的pdf,返参如下所示。

返参base64编码

一、base编码转为pdf方法

  • atob() 方法可用于解码base-64 编码的字符串,再通过Blob将Uint8Array数组转换成pdf类型的文件对象
    // content是base64格式
    viewPdf(content) {
      console.log("content",content);
      const blob = this.base64ToBlob(content);
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob);
      } else {
        const fileURL = URL.createObjectURL(blob);
        window.open(fileURL);//打开ppf文件
      }
    },
    base64ToBlob(code) {
      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' });
    },

二、打印方法

  • 再写个打印方法,调接口获取返回的base64编码字符串,再去调用上面base64转为pdf的方法
	// 点击打印
    handlePrint() {
      let params = {
        deliveryNoteNoList: this.deliveryNoteNoList
      };
      this.$requestFn("POST", this.$url.dispatch.printDeliveryNote, params).then((res) => {
        if(res && res.deliverNoteBase64List[0]){
          this.viewPdf(res.deliverNoteBase64List[0]);
        }
      });
    },
  • 接着就可实现效果了,如下图所示
    base64编码转成pdf预览
    这个方法我实现过了,可以实际运用的,如果还有其他方法,希望大家可以留言,一起交流一下hhh

标签:vue,const,base64,content,window,pdf,打印
From: https://www.cnblogs.com/PakhoYip/p/17198503.html

相关文章

  • PDFJS 跨域
      https://cloud.tencent.com/developer/article/1531860?from=15425&areaSource=102001.1&traceId=B4KzYkzcjSz31MUNIH68v          ......
  • Spring Boot&Vue3 前后端分离 实战 wiki 知识库系统<四>--前后端交互整合
    接着上一次​​SpringBoot&Vue3前后端分离实战wiki知识库系统<三>--VueCLI项目搭建目搭建​​的继续往下学习,这次的目标就是前后端进行功能的联调了。集成HTTP库Axio......
  • C# PDF 预览
    publicActionResultV1(){try{stringfilePath="E://123.pdf";if(System.IO.File......
  • Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<四>--前后端交互整合
    接着上一次https://www.cnblogs.com/webor2006/p/17158238.html的继续往下学习,这次的目标就是前后端进行功能的联调了。集成HTTP库Axios:简述:对于Vue前端来说,需要发起后......
  • 搭建VUE项目
    安装nodejshttps://blog.csdn.net/zhouyan8603/article/details/109039732安装vue-cli开发脚手架npminstall-g@vue/clihttps://cli.vuejs.org/zh/guide/installat......
  • java-vue多项目开发powershell最佳实践-
    Tab1:左边:redis右上:nginx右下:nginx-sstop(2个nginx方便配置改动后,nginx重启)Tab2左侧build前端右上:jar1运行右下:jar2运行**如此,切换丝滑!**......
  • Vue Router 之 router.push 和 router.resolve 页面跳转简单记录
    params和query传参的区别params传参只能通过name引入路由,如果写成path:‘/xxx’,获取的参数是undefined,获取方式:this.$route.paramsquery传参name和path二者都可正常......
  • vue-router SyntaxError: Unexpected token '{' (at xxx.vue:14:8)
    点进去后指向这一行:重新一行一行看,发现是整理代码的时候,以为有一个prop变量用不到,删了,结果在组件模板另一个地方有用。奇怪这类问题为什么编辑器不会提示出来。......
  • Vue nextTick的使用,含案例
    nextTick1、语法:this.$nextTick(回调函数)2、作用:在下一次DOM更新结束后执行其指定的回调3、什么时候用?   当改变数据后,要基于更新后的新DOM进行某些操作时,要在ne......
  • SSM SpringBoot vue药店管理系统
    SSMSpringBootvue药店管理系统登录首页普通管理员管理用户信息管理会员信息管理生产厂商管理类别信息管理药品信息管理进货管理销售信息管理联系我们管理系......