jspdf 生成PDF

. . . . .

已于 2023-11-20 21:00:08 修改

阅读量355

点赞数

分类专栏：前端开发

于 2022-11-27 00:20:34 首次发布

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/128059251

版权

jspdf PDF渲染网页展示 PDF.js canvas

关键词由CSDN通过智能技术生成

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

jspdf官网

在这里插入图片描述
常用方法

addFont  // 添加字体
addPage // 增加一页
addImage // 添加图片
circle // 画圆
clip // 画椭圆
deletePage // 删除一页
ellipse // 画椭圆
getCharSpace
getCreationDate
getDrawColor
getFileId
getFillColor
getFontList
getLineHeightFactor
getTextColor
insertPage
line
lines
lstext
movePage // 移动一页
output
rect // 画矩形
roundedRect
save  // 保存一个pdf
setCharSpace
setCreationDate
setDisplayMode
setDrawColor
setFileId
setFillColor
setFont
setFontSize
setFontSize
setFontStyle
setLineCap
setLineHeightFactor
setLineJoin
setLineWidth
setPage
setProperties
setR2L
setR2L
setTextColor
text // 写入文本
triangle

将PDF渲染到网页上

<!DOCTYPE html>
<html>
    <head>
        <title>PDF.js Demo</title>
        <style>
            #pdfContainer {
                width: 1000px;
                height: 800px;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div id="pdfContainer"></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js"></script>
        <script>
            // 获取PDF文件路径
            const pdfUrl = '';

            // 创建PDF.js实例
            const pdfjsLib = window['pdfjs-dist/build/pdf'];

            // 加载并渲染PDF文件
            pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
                // 获取PDF文件的总页数
                const numPages = pdf.numPages;
                for (let pageNum = 1; pageNum <= numPages; pageNum++) {
                    pdf.getPage(pageNum).then(page => {
                        const scale = 1.5;
                        const viewport = page.getViewport({ scale });

                        // 创建一个canvas元素用于显示PDF内容
                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.width = viewport.width;
                        canvas.height = viewport.height;

                        // 将canvas添加到页面中
                        document.getElementById('pdfContainer').appendChild(canvas);

                        // 渲染第一页内容到canvas上
                        page.render({
                            canvasContext: context,
                            viewport
                        });
                    });
                }
            });
        </script>
    </body>
</html>