在Vue应用中集成PDF创建、查看和标注功能

Dynamsoft Document Viewer是为文档图像提供查看、管理功能的SDK。我们可以使用它集成PDF创建、查看和标注功能到我们的Web应用中。在本文中,我们将使用Vue编写一个demo。

新建项目

使用Vite创建一个新的Vue + TypeScript项目:

bash 复制代码
npm create vite@latest pdf-app -- --template vue-ts

安装Dynamsoft Document Viewer

首先,通过npm安装Dynamsoft Document Viewer。

javascript 复制代码
npm install dynamsoft-document-viewer

然后,我们需要将Dynamsoft Document Viewer的资源复制到public文件夹。

  1. 在以下路径创建一个文件夹:public/assets/ddv-resources

  2. 安装ncpnpm install ncp --save-dev

  3. 修改package.json ,将资源从node_modules复制到public文件夹。

    diff 复制代码
    - "dev": "vite",
    - "build": "tsc -b && vite build",
    + "dev": "ncp node_modules/dynamsoft-document-viewer/dist public/assets/ddv-resources && vite",
    + "build": "ncp node_modules/dynamsoft-document-viewer/dist public/assets/ddv-resources && tsc -b && vite build",

初始化Dynamsoft Document Viewer

重写App.vue。挂载后,使用许可证初始化Dynamsoft Document Viewer。可以在此处申请许可证

html 复制代码
<script setup lang="ts">
import { DDV, UiConfig } from 'dynamsoft-document-viewer';
import { onMounted, ref } from 'vue';

const initialized = ref(false);
onMounted(()=>{
  if (initialized.value === false) {
    initDDV();
  }
})

const initDDV = async () => {
  DDV.Core.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; // Public trial license which is valid for 24 hours
  DDV.Core.engineResourcePath = "assets/ddv-resources/engine";// Lead to a folder containing the distributed WASM files
  await DDV.Core.loadWasm();
  await DDV.Core.init();
  // Configure image filter feature which is in edit viewer
  DDV.setProcessingHandler("imageFilter", new DDV.ImageFilter());
  initialized.value = true;
}
</script>

创建Edit Viewer

  1. 在template中使用以下内容:

    html 复制代码
    <template>
      <div id="app">
        <h2>Document Viewer Demo</h2>
        <div v-if="!initialized">Initializing...</div>
        <div id="container"></div>
      </div>
    </template>

    CSS:

    css 复制代码
    #app {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
    }
    
    #container {
      max-width: 80%;
      width: 1280px;
      height: 480px;
    }
  2. 初始化Edit Viewer的实例,并通过ID将其绑定到一个容器。

    tsx 复制代码
    const config = DDV.getDefaultUiConfig("editViewer", {includeAnnotationSet: true}) as UiConfig;
    // Create an edit viewer
    editViewer.current = new DDV.EditViewer({
      container: "container",
      uiConfig: config,
    });
  3. 导入Dynamsoft Document Viewer的CSS。

    tsx 复制代码
    import "dynamsoft-document-viewer/dist/ddv.css";

好的,我们已将Dynamsoft Document Viewer集成到了我们的Vue应用中。

UI包含工具栏、缩略图查看器和一个主的页面内容查看器。我们可以点击工具栏上的按钮来加载新图像、编辑图像、添加PDF标注并将文档保存为PDF文件。

除了UI,我们还可以通过代码来操作文档。阅读文档了解更多信息。

源代码

查看demo的源代码并尝试使用:

github.com/tony-xlh/do...

相关推荐
EndingCoder1 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手1 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评1 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组1 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg5 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz6 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码7 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v7 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山7 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin7 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack