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>