JavaScript前端实现PDF加解密

更新时间：2024年12月28日 09:54:34 作者：xulihang

Dynamsoft Document Viewer是一个用于文档扫描和查看的JavaScript SDK,可以在前端对PDF文件进行加密和解密,下面我们就来看看它的具体使用吧

我们可以对PDF文件加密以保护其内容。在这种情况下，需要输入密码才能查看或编辑内容。Dynamsoft Document Viewer是一个用于文档扫描和查看的JavaScript SDK，可以在前端对PDF文件进行加密和解密。在本文中，我们将探讨如何使用它。

使用Dynamsoft Document Viewer打开一个PDF文件

1.创建一个包含以下模板的新HTML文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Browse Viewer</title>
  <style>
  </style>
</head>
<body>
</body>
<script>
</script>
</html>

2.在页面中包含Dynamsoft Document Viewer的文件。

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/ddv.css">

3.使用许可证初始化Dynamsoft Document Viewer。可以在这里申请一个证书。

Dynamsoft.DDV.Core.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day trial
Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.1.0/dist/engine";// Lead to a folder containing the distributed WASM files
await Dynamsoft.DDV.Core.init();

4.创建一个新的文档实例。

const docManager = Dynamsoft.DDV.documentManager;
const doc = docManager.createDocument();

5.创建一个Browse Viewer实例，将其绑定到一个容器，然后用它来查看我们刚刚创建的文档。

HTML：

<div id="viewer"></div>

JavaScript：

const browseViewer = new Dynamsoft.DDV.BrowseViewer({
  container: document.getElementById("viewer"),
});

browseViewer.openDocument(doc.uid);

CSS：

#viewer {
  width: 320px;
  height: 480px;
}

6.使用input选择一个PDF文件并将其加载到文档实例中，然后可以用Browse Viewer进行查看。

HTML：

<label>
  Select a PDF file to load:
  <br/>
  <input type="file" id="files" name="files" accept=".pdf" onchange="filesSelected()"/>
</label>

JavaScript：

async function filesSelected(){
  let filesInput = document.getElementById("files");
  let files = filesInput.files;
  if (files.length>0) {
    const file = files[0];
    const blob = await readFileAsBlob(file);
    await doc.loadSource(blob); // load the PDF file
  }
}

function readFileAsBlob(file){
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = async function(e){
      const response = await fetch(e.target.result);
      const blob = await response.blob();
      resolve(blob);
    };
    fileReader.onerror = function () {
      reject('oops, something went wrong.');
    };
    fileReader.readAsDataURL(file);
  })
}

打开受密码保护的PDF文件

如果PDF受密码保护，使用默认配置打开时会抛出错误，提示我们需要输入密码才能打开它。

Error: Failed to read the PDF file because it's encrypted and the correct password is not provided.

我们可以捕获该错误并要求用户输入密码。

HTML：

<div class="modal input-modal">
  <div>
    <label>
      Please input the password:
    </label>
    <br/>
    <input type="password" id="password"/>
    <br/>
    <button id="okayBtn">Okay</button>
  </div>
</div>

CSS：

.modal {
  display: flex;
  align-items: flex-start;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 250px;
  border: 1px solid gray;
  border-radius: 5px;
  background: white;
  z-index: 9999;
  padding: 10px;
  visibility: hidden;
}

.input-modal.active {
  visibility: inherit;
}

JavaScript：

function filesSelected(){
  //...
  try {
    await doc.loadSource(blob);
  } catch (error) {
    if (error.cause.code === -80202) {
      askForPassword();
    }
  }
}

function askForPassword(){
  document.getElementById("password").value = ""; //clear previous password
  document.getElementsByClassName("input-modal")[0].classList.add("active");
}

document.getElementById("okayBtn").addEventListener("click",async function(){
  document.getElementsByClassName("input-modal")[0].classList.remove("active");
  try {
    await doc.loadSource({fileData:blob,password:document.getElementById("password").value});  
  } catch (error) {
    alert(error);
  }
})

需要将密码传入loadSource方法：

await doc.loadSource({fileData:blob,password:document.getElementById("password").value});

保存为受密码保护的PDF文件

不设密码保存文档为PDF，可以创建一个解密的PDF文件。设了密码的话，则创建一个加密的PDF文件。

<div>
  <label>Set a password:
    <input type="password" id="newPassword"/>
  </label>
</div>
<script>
let newPassword = document.getElementById("newPassword").value;
let blob;
if (newPassword) {
  blob = await doc.saveToPdf({password:newPassword});
}else{
  blob = await doc.saveToPdf();
}
</script>

到此这篇关于JavaScript前端实现PDF加解密的文章就介绍到这了,更多相关JavaScript PDF加解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS随机洗牌算法之数组随机排序
这篇文章主要介绍了JS随机洗牌算法之给数组随机排序的相关资料,需要的朋友可以参考下
2016-03-03
layui表单验证select下拉框实现验证的方法
今天小编就为大家分享一篇layui表单验证select下拉框实现验证的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
微信小程序左右滑动删除事件详解
这篇文章主要为大家详细介绍了微信小程序左右滑动删除事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
js 刷新页面的代码小结推荐
这里介绍的是网上比较流行的刷新页面的代码，整理的相对比较全了，这些知识都是前后台结合过程中，经常用的到的。
2010-04-04
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
下面小编就为大家带来一篇js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
uniapp动态修改元素节点样式详解
这篇文章主要介绍了uni-app动如何态修改元素节点样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-08-08
微信小程序webView嵌入H5的方法实例
web-view是小程序提供的一个可以直连h5页面的组件,只要传递一个h5页面的地址,就可以在小程序里直接打开预览该h5页面,这篇文章主要给大家介绍了微信小程序webView嵌入H5的相关资料,需要的朋友可以参考下
2021-07-07
ECharts数据可视化基本使用之常用图表类型
这篇文章主要给大家介绍了关于ECharts数据可视化基本使用之常用图表类型的相关资料,echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,需要的朋友可以参考下
2023-11-11
AngularJs+Bootstrap实现漂亮的计算器
这篇文章主要为大家详细介绍了angularJs+Bootstrap实现漂亮的计算器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
本文通过实例代码给大家介绍了微信小程序使用scroll-view标签实现自动滑动到底部功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-11-11