Skip to content

vue.md

Latest commit

 

History

History
160 lines (120 loc) · 3.6 KB

vue.md

File metadata and controls

160 lines (120 loc) · 3.6 KB
layout default-layout
needAutoGenerateSidebar true
needGenerateH3Content true
noTitleIndex true
title Vue Document Viewer - Dynamsoft Document Viewer Documentation
keywords Documentation, Dynamsoft Document Viewer, PDF, Getting Started, Vue
breadcrumbText Vue
description Learn how to integrate Dynamsoft Document Viewer into your Vue project with this step-by-step guide.

How to Integrate Document Viewer into a Vue Project

This guide will show you how to integrate Dynamsoft Document Viewer into a Vue project.

You can can download the sample on GitHub:

DownloadVue Helloworld

Preparation

Make sure you have node installed.

New Project

Create a new Vue project.

npm create vite@latest ddv-vue -- --template vue-ts

Add Dependencies

  1. Install Dynamsoft Document Viewer.

    npm install dynamsoft-document-viewer

  2. Copy the resources of Dynamsoft Document Viewer into the public folder.

    1. Install rollup-plugin-copy as devDependencies.

      npm install rollup-plugin-copy --save-dev

    2. Modify vite.config.ts to copy the resources.

      import copy from "rollup-plugin-copy";
export default defineConfig({
  //...
  plugins: [
    copy({
      targets: [
        {
          src: "node_modules/dynamsoft-document-viewer/dist",
          dest: "public/dynamsoft-document-viewer",
        },
      ],
      hook: "buildStart",
    }),
    vue(),
  ],
  //...
})

Create a Document Viewer Component

  1. Create a viewer component file under src/Component/viewer.vue.

  2. Add the following content in the component file. It will bind Edit Viewer to a container. A license is set here. You can apply for a 30-day trial on this page.

    <!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { onMounted } from 'vue'
import { DDV } from 'dynamsoft-document-viewer'
import 'dynamsoft-document-viewer/dist/ddv.css'

onMounted(async () => {
  DDV.on('error', (e) => {
    alert(e.message)
  })

  // Public trial license which is valid for 24 hours
  DDV.Core.license = "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9";
  DDV.Core.engineResourcePath = "/dynamsoft-document-viewer/dist/engine";
  // Preload DDV Resource
  DDV.Core.loadWasm();
  await DDV.Core.init();
  
  const viewer = new DDV.EditViewer({
    container: 'container'
  });
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>

Use the Document Viewer Component

Open App.vue and add the viewer component.

<script setup lang="ts">
import Viewer from './Component/Viewer.vue'
</script>

<template>
  <h1>Hello World for Vue</h1>
  <Viewer></Viewer>
</template>

<style>
html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px 8px 8px 8px;
  box-sizing: border-box;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>

Run the app using the following command and you should see the viewer mounted in your application!

npm run dev

Other Samples

You can find other samples on this GitHub repo.