当前位置: 首页 > news >正文

vue 渲染pdf并盖章之后生成新的pdf

目录

1.渲染pdf

 1.页面准备渲染的容器,使用canvas渲染

2.把文件流渲染到canvas上面

3.下载pdf.js插件

4.使用 

2.盖章

1.印章图片

2.自定义指令拖拽

3.生成新的pdf 

1.下载生成pdf插件

2.使用 

4.页面效果图 

1.展示pdf 

2.拖拽盖章

3.生成pdf文件 

5.整体代码


1.渲染pdf

注意:在线链接会有跨域问题,生成pdf无法显示

使用在线的pdf链接 可以使用iframe渲染但是导出无法显示

<iframe :src="url" height="800px;" width="100%"></iframe>

 需要后端返回base64或者blob格式或者二进制文件流才可以

接收后端返回的二进制流需要配置请求,不然会乱码

// 获取在线pdf文件的文件流
export function getPdfWorldApi(data) {return request({url: '/api/www/www',//请求地址method: 'POST',//请求方式data,//参数responseType: 'blob', //获取二进制流设置接收类型,不设置会乱码})
}

 1.页面准备渲染的容器,使用canvas渲染

<div v-for="(item, i) in canvasPage" :key="i"><canvas :id="`pdf_canvas_${item}`"></canvas>
</div>

相关文章:

  • 多线程的介绍
  • 2024Python二级
  • arcgis中.mpk和.lpk以及.mxd文件
  • 09 string的实现
  • python和shell脚本,每隔五分钟将远端服务器中的文件夹数据下载到跳板机
  • 1千多条中医中药知识及问答ACCESS\EXCEL数据库
  • 微信添加好友频繁的误区有哪些?
  • 第一章 深度学习发展概述
  • 代码随想录算法训练营day14 | 二叉树的递归遍历、二叉树的迭代遍历、二叉树的统一迭代
  • Nodejs 第五十四章(net)
  • 讲解linux下的Qt如何编译oracle的驱动库libqsqloci.so
  • R语言基础的代码语法解译笔记
  • 通过OceanBase 3.x中not in无法走hash连接的变化,来看OB优化器的发展
  • 2024蓝桥杯每日一题(区间合并)
  • pdf也可以制作成可翻页的电子书吗?
  • 【译】JS基础算法脚本:字符串结尾
  • @angular/forms 源码解析之双向绑定
  • C++类的相互关联
  • java正则表式的使用
  • PAT A1120
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • seaborn 安装成功 + ImportError: DLL load failed: 找不到指定的模块 问题解决
  • vue和cordova项目整合打包,并实现vue调用android的相机的demo
  • 多线程事务回滚
  • 记录一下第一次使用npm
  • 融云开发漫谈:你是否了解Go语言并发编程的第一要义?
  • 通过几道题目学习二叉搜索树
  • 一个项目push到多个远程Git仓库
  • 一些关于Rust在2019年的思考
  • ​configparser --- 配置文件解析器​
  • ​第20课 在Android Native开发中加入新的C++类
  • # 数据结构
  • #HarmonyOS:软件安装window和mac预览Hello World
  • (Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析
  • (二)JAVA使用POI操作excel
  • (附源码)php投票系统 毕业设计 121500
  • (附源码)ssm失物招领系统 毕业设计 182317
  • (附源码)计算机毕业设计SSM疫情居家隔离服务系统
  • (十五)Flask覆写wsgi_app函数实现自定义中间件
  • (一)为什么要选择C++
  • (转)关于pipe()的详细解析
  • .apk 成为历史!
  • .MSSQLSERVER 导入导出 命令集--堪称经典,值得借鉴!
  • .net framework 4.0中如何 输出 form 的name属性。
  • .NET 常见的偏门问题
  • .Net环境下的缓存技术介绍
  • .NET设计模式(8):适配器模式(Adapter Pattern)
  • .NET下的多线程编程—1-线程机制概述
  • @Autowired自动装配
  • @Bean, @Component, @Configuration简析
  • @modelattribute注解用postman测试怎么传参_接口测试之问题挖掘
  • [android] 切换界面的通用处理
  • [Asp.net mvc]国际化
  • [bzoj 3534][Sdoi2014] 重建
  • [C/C++]数据结构----顺序表的实现(增删查改)