【pdfjs+vue】vue中实现pdf预览并且内容可复制，点击内容链接可页面跳转

最新推荐文章于 2025-03-20 10:27:53 发布

高高要努力

最新推荐文章于 2025-03-20 10:27:53 发布

阅读量985

点赞数 3

分类专栏：前端框架文章标签：前端 vue pdf

本文链接：https://blog.csdn.net/LG_971124/article/details/140375037

版权

前端框架专栏收录该内容

4 篇文章

订阅专栏

使用pdfjs插件，在vue中实现pdf预览，内容可复制，点击内容链接可以实现页面跳转功能。

1.安装pdfjs

npm install pdfjs-dist@2.0.943

2.在组件中引入pdfjs

  // pdfjs 2.0.943 资源引入
    import * as pdfjsLib from 'pdfjs-dist';
    import { workerSrc } from "pdfjs-dist/build/pdf.worker.min";
    pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
    import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer';
    import 'pdfjs-dist/web/pdf_viewer.css';

3.完整代码

<template>
    <div>
        <h1>PDF渲染</h1>
        <button @click="pdfPrint()">打印</button>
        <div id="pdfBox" style="min-height: 500px;"></div>
    </div>
</template>
<script>
// pdfjs 2.0.943 资源引入
import * as pdfjsLib from 'pdfjs-dist';
import { workerSrc } from "pdfjs-dist/build/pdf.worker.min";
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/web/pdf_viewer.css';
export default {
    data() {
        return {
            pdf: ''
        }
    },
    methods: {
        //打印
        pdfPrint(){
            window.print();
        },

        // 在 PDF 页面上叠加超链接
        addLinkToPage(page, link) {
            console.log("link===", link);
            const linkDiv = document.createElement("a");
            linkDiv.href = link.url;
            linkDiv.target = "_blank";
            linkDiv.style.position = "absolute";
            linkDiv.style.left = link.rect[0] * 1.5 + "px";
            linkDiv.style.top = (843 - link.rect[3]) * 1.5 + "px";
            linkDiv.style.width = (link.rect[2] - link.rect[0]) * 1.5 + "px";
            linkDiv.style.height = (link.rect[3] - link.rect[1]) * 1.5 + "px";
            linkDiv.style.backgroundColor = "transparent";
            // linkDiv.style.border = "1px solid red";
            linkDiv.style.pointerEvents = "auto";
            linkDiv.style.zIndex = "1"
            page.appendChild(linkDiv);
        },

        /**
         * 渲染每页pdf
         */
        renderPage(pageNumber) {
            this.pdf.getPage(pageNumber).then((page) => {
                // var viewport = page.getViewport({ scale: 1.5 });
                var viewport = page.getViewport(1.5);

                // 创建canvas承载pdf内容
                const canvas = document.createElement("canvas");
                const canvasContext = canvas.getContext("2d");
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                canvas.style.display = "block";

                canvasContext.setTransform(1, 0, 0, 1, 0, 0);

                const canvasBox = document.createElement("div");
                canvasBox.style.height = viewport.height + 2 + "px";
                canvasBox.style.width = viewport.width + 2 + "px";
                canvasBox.style.margin = "0 auto 10px";
                canvasBox.style.border = "1px solid #ccc";
                canvasBox.style.position = "relative";
                canvasBox.appendChild(canvas);

                const pdfBox = document.getElementById("pdfBox");
                pdfBox.appendChild(canvasBox);

                const renderContext = {
                    canvasContext,
                    viewport,
                };

                page
                    .render(renderContext)
                    .then(() => {
                        return page.getTextContent();
                    })
                    .then((textContent) => {
                        // 实现选中复制功能
                        const textLayerDiv = document.createElement("div");
                        textLayerDiv.setAttribute("class", "textLayer");
                        canvasBox.appendChild(textLayerDiv);

                        let textLayer = new TextLayerBuilder({
                            textLayerDiv: textLayerDiv,
                            pageIndex: page.pageIndex,
                            viewport: viewport,
                        });

                        textLayer.setTextContent(textContent);
                        textLayer.render();
                    });

                // 实现链接点击
                page.getAnnotations().then(function (annotations) {
                    console.log("annotations==", annotations);
                    annotations.forEach(function (annotation) {
                        if (annotation.subtype === "Link") {
                            this.addLinkToPage(canvasBox, annotation);
                        }
                    });
                });
            });
        },
    },
    mounted() {
        // 本地渲染pdf, 避免浏览器获取iframe高度各种兼容性问题
        //这里获取线上PDF地址，测试暂时写死
        const url = 'xxx';
        pdfjsLib.getDocument(url).promise.then((pdf) => {
            this.pdf = pdf;
            let pages = pdf.numPages;
            for (let i = 1; i <= pages; i++) {
                this.renderPage(i);
            }
        });
    }
}
</script>