vue 渲染pdf,docx,png,jpg文件并盖章之后生成新的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.整体代码

6.渲染文档文件和图片文件

---

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>

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

我使用的是blob格式，其他格式也可以转为blob格式

 

3.下载pdf.js插件

npm install pdfjs-dist --save

4.使用 

// 引入
import * as pdfJS from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; 
pdfJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

// 加载PDF文件流
pdfJS.getDocument(文件流路径blob:http://localhost:8080/8dfa2574-51e5-49a9-8610-145a29f5f784).promise.then((pdf) => {
    // 页数
    let pageNum = pdf.numPages;
    // 多少页就多少个canvas容器
    // console.log("页数:" + pageNum);
    // 赋值给data在页面准备容器
    this.canvasPage = pageNum;
    // 循环转化为canvas,因为pdf有多页
    for (let i = 1; i <= pageNum; i++) {
        pdf.getPage(i).then((page) => {
            const canvas = document.getElementById("pdf_canvas_" + i);//生成到对应的容器
            const ctx = canvas.getContext("2d");
            const viewport = page.getViewport({ scale: 1.5 });//生成倍数，一般1.5倍就清晰了，越高文件就越大
            canvas.height = viewport.height;//页面高度
            canvas.width = viewport.width;//页面宽度
            const destWidth = 820;//自定义生成内容的宽，我的是一面占满就和盒子的宽一样就可以，一面二页就设置为盒子的一半就可以
            canvas.style.width = destWidth + "px";
            // 计算生成比例高度
            canvas.style.height =
                destWidth * (viewport.height / viewport.width) + "px";
            // 生成到canvas
            page.render({
                canvasContext: ctx,
                viewport,
            });
        });
    }
});

2.盖章

1.印章图片

<div class="bottom">
    <img v-drag src="../../assets/index/seal.png" alt="" />
    <img v-drag src="../../assets/index/seal2.png" alt="" />
</div>

2.自定义指令拖拽

directives: {
        // 拖拽
        drag(el) {
            // 鼠标按下
            el.onmousedown = function (e) {
                // console.log("开始");
                let x = e.pageX - el.offsetLeft;
                let y = e.pageY - el.offsetTop;
                // 鼠标移动
                document.onmousemove = function (e) {
                    el.style.left = e.pageX - x + "px";
                    el.style.top = e.pageY - y + "px";
                    //鼠标抬起事件
                    document.onmouseup = function () {
                        // console.log("停止");
                        document.onmousemove = null;
                    };
                };
            };
        },
    },

3.生成新的pdf 

1.下载生成pdf插件

npm install html2canvas jspdf

2.使用 

import html2canvas from "html2canvas";
import JsPDF from "jspdf";

// 生成图片
        async set_png() {
            const pageWidth = 585.28; // A4纸的宽高 减去左右