目录
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>