帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

功能强大的jQuery在线预览、添加注释PDF插件

帝国模板之家 2021-01-18 网页特效 评论

介绍

一个在线的PDF注解jQuery插件,允许用户在PDF文件上写评论、插入图像、留下注释以及绘制线条和形状(如箭头、矩形)。

更多功能:

从JSON导出和导入注释数据。
矩形工具的自定义边框颜色和边框大小。
自定义铅笔工具刷大小。
文本工具的自定义字体大小。
导出带批注的PDF。

兼容的浏览器

Chrome, IE10+, FireFox, Opera, Safari

依赖

使用方法

1. 在文档中加载所需的资源。

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />

<!-- PDF.js -->
<script src="/path/to/cdn/pdf.min.js"></script>
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = '/path/to/cdn/pdf.worker.min.js';</script>

<!-- fabric.js -->
<script src="/path/to/cdn/fabric.min.js"></script>
<script src="./arrow.fabric.js"></script>

<!-- jspdf.js -->
<script src="/path/to/cdn/jspdf.umd.min.js"></script>

2. 加载pdfannotate.js文件插件。

<!-- Core Stylesheet -->
<link rel="stylesheet" href="./pdfannotate.css">

<!-- Custom Styles -->
<link rel="stylesheet" href="./styles.css">

<!-- Core JavaScript -->
<script src="./pdfannotate.js"></script>

3. 创建一个容器来容纳PDF查看器。

<div id="pdf-container"></div>

4. 初始化插件并将PDF文件加载到容器中。

var pdf = new PDFAnnotate("pdf-container", "pdf.pdf", {
    // options here
});

5.启用并配置PDF注释和图形标记工具。

// enable moving tool
pdf.enableSelector();

// Enable pencil tool
pdf.enablePencil(); 

// Enable comment/note tool
pdf.enableAddText(); 

// Enable arrow tool
pdf.enableAddArrow(); 

// Enable rectangle tool 
pdf.enableRectangle();

// Add an image to the PDF
pdf.addImageToCanvas();

// Delete the selected annotation
pdf.deleteSelectedObject(); 

// Remove all annotations
pdf.clearActivePage(); // Clear current page

// Save the PDF with annotations
pdf.savePdf(); 

// Serialize PDF annotation data
pdf.serializePdf();

// Load annotations from JSON
pdf.loadFromJSON(serializedJSON);

// Set color for tools
pdf.setColor(color);

// Set border color for rectangle tool
pdf.setBorderColor(color);

// Set brush size for pencil tool
pdf.setBrushSize(width);

// Set font size for text tool
pdf.setFontSize(font_size);

// Set border size of rectangles
pdf.setBorderSize(border_size);

6. 可用的选项和回调函数。

var pdf = new PDFAnnotate("pdf-container", "pdf.pdf", {
    onPageUpdated(page, oldData, newData) {
      console.log(page, oldData, newData);
    },
    ready() {
      console.log("Plugin initialized successfully");
    },
    scale: 1.5,
    pageImageCompression: "MEDIUM", // FAST, MEDIUM, SLOW
});
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言