Skip to content
This repository was archived by the owner on Feb 19, 2025. It is now read-only.

Commit 257a5aa

Browse files
author
Andrey Safonov
authored
Merge pull request #16 from PDFTron/Vue3-update
Vue3 Update
2 parents 24de7f4 + 5192cdd commit 257a5aa

File tree

9 files changed

+2689
-2973
lines changed

9 files changed

+2689
-2973
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.DS_Store
22
node_modules
33
/dist
4-
public/lib
4+
public/webviewer
55

66
# local env files
77
.env.local

‎babel.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
presets: [
3-
'@vue/app'
3+
'@vue/cli-plugin-babel/preset'
44
]
55
}

‎package-lock.json

+2,645-2,915
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+15-20
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webviewer-vue-sample",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"private": true,
55
"scripts": {
66
"serve": "vue-cli-service serve",
@@ -9,41 +9,36 @@
99
"postinstall": "node tools/copy-webviewer-files.js"
1010
},
1111
"dependencies": {
12-
"@pdftron/webviewer": "^7.0.0",
13-
"core-js": "^3.4.8",
14-
"fs-extra": "^9.0.0",
15-
"vue": "^2.6.10"
12+
"@pdftron/webviewer": "^7.0.1",
13+
"core-js": "^3.6.5",
14+
"vue": "^3.0.0-0"
1615
},
1716
"devDependencies": {
18-
"@vue/cli-plugin-babel": "^4.1.1",
19-
"@vue/cli-plugin-eslint": "^4.1.1",
20-
"@vue/cli-service": "^4.3.1",
21-
"babel-eslint": "^10.0.3",
17+
"@vue/cli-plugin-babel": "~4.5.0",
18+
"@vue/cli-plugin-eslint": "~4.5.0",
19+
"@vue/cli-service": "~4.5.0",
20+
"@vue/compiler-sfc": "^3.0.0-0",
21+
"babel-eslint": "^10.1.0",
2222
"eslint": "^6.7.2",
23-
"eslint-plugin-vue": "^6.2.2",
24-
"vue-template-compiler": "^2.6.11"
23+
"eslint-plugin-vue": "^7.0.0-0"
2524
},
2625
"eslintConfig": {
2726
"root": true,
2827
"env": {
2928
"node": true
3029
},
3130
"extends": [
32-
"plugin:vue/essential",
31+
"plugin:vue/vue3-essential",
3332
"eslint:recommended"
3433
],
35-
"rules": {},
3634
"parserOptions": {
3735
"parser": "babel-eslint"
38-
}
39-
},
40-
"postcss": {
41-
"plugins": {
42-
"autoprefixer": {}
43-
}
36+
},
37+
"rules": {}
4438
},
4539
"browserslist": [
4640
"> 1%",
47-
"last 2 versions"
41+
"last 2 versions",
42+
"not dead"
4843
]
4944
}

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title>webviewer-vue-sample</title>
99
</head>
10-
<body style="margin:0;">
10+
<body>
1111
<noscript>
1212
<strong>We're sorry but webviewer-vue-sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1313
</noscript>

‎src/App.vue

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
11
<template>
22
<div id="app">
3-
<WebViewer :path="`${publicPath}lib`" url="https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf"/>
3+
<img alt="Vue logo" src="./assets/logo.png">
4+
<WebViewer initialDoc="https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf"/>
45
</div>
56
</template>
67

78
<script>
89
import WebViewer from './components/WebViewer.vue'
910
1011
export default {
11-
name: 'app',
12+
name: 'App',
1213
components: {
1314
WebViewer
14-
},
15-
data () {
16-
return {
17-
publicPath: process.env.BASE_URL
18-
}
1915
}
2016
}
2117
</script>
2218

2319
<style>
2420
#app {
25-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
21+
font-family: Avenir, Helvetica, Arial, sans-serif;
2622
-webkit-font-smoothing: antialiased;
2723
-moz-osx-font-smoothing: grayscale;
2824
text-align: center;
2925
color: #2c3e50;
26+
margin-top: 60px;
3027
}
3128
</style>

‎src/components/WebViewer.vue

+18-20
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
11
<template>
2-
<div ref='viewer'></div>
2+
<div id="webviewer" ref="viewer"></div>
33
</template>
44

55
<script>
6-
/* eslint-disable */
7-
import WebViewer from '@pdftron/webviewer'
6+
import { ref, onMounted } from 'vue';
7+
import WebViewer from '@pdftron/webviewer';
88
99
export default {
1010
name: 'WebViewer',
11-
props: {
12-
path: String,
13-
url: String
11+
props: { initialDoc: { type: String } },
12+
setup(props) {
13+
const viewer = ref(null);
14+
onMounted(() => {
15+
const path = `${process.env.BASE_URL}webviewer`;
16+
WebViewer({ path, initialDoc: props.initialDoc }, viewer.value);
17+
});
18+
19+
return {
20+
viewer,
21+
};
1422
},
15-
mounted: function () {
16-
WebViewer({
17-
path: this.path,
18-
initialDoc: this.url, // replace with your own PDF file
19-
}, this.$refs.viewer).then((instance) => {
20-
// call apis here
21-
});
22-
}
23-
}
23+
};
2424
</script>
2525

26-
<!-- Add "scoped" attribute to limit CSS to this component only -->
27-
<style scoped>
28-
div {
29-
width: 100%;
30-
height: 100vh;
26+
<style>
27+
#webviewer {
28+
height: 800px;
3129
}
3230
</style>

‎src/main.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import Vue from 'vue'
1+
import { createApp } from 'vue'
22
import App from './App.vue'
33

4-
Vue.config.productionTip = false
5-
6-
new Vue({
7-
render: h => h(App),
8-
}).$mount('#app')
4+
createApp(App).mount('#app')

‎tools/copy-webviewer-files.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const fs = require('fs-extra');
22

33
const copyFiles = async () => {
44
try {
5-
await fs.copy('./node_modules/@pdftron/webviewer/public', './public/lib/');
5+
await fs.copy('./node_modules/@pdftron/webviewer/public', './public/webviewer/');
66
console.log('WebViewer files copied over successfully');
77
} catch (err) {
88
console.error(err);

0 commit comments

Comments
 (0)