Prechádzať zdrojové kódy

feat: 设置oss跨域问题,并试验结果

ChenYangfan 6 rokov pred
rodič
commit
06a9e2765a

+ 1 - 0
public/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <script src="https://cdn.bootcss.com/pdf.js/2.3.200/pdf.min.js"></script>
+<!--  <script src="https://cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js"></script>-->
   <title>SEEC 课堂助手</title>
   <style>
     :root {

BIN
src/assets/dummy.pdf


+ 31 - 2
src/components/Pdf.vue

@@ -1,11 +1,40 @@
 <template>
   <div>
-    pdf 阅读器
+    <canvas id="pdf-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
   </div>
 </template>
 
 <script>
-export default {}
+import pdfjs from '@/utils/pdf'
+
+export default {
+  mounted () {
+    const loadingTask = pdfjs.getDocument('http://seec-helper-pdf.oss-cn-hangzhou.aliyuncs.com/dummy.pdf?OSSAccessKeyId=LTAI4Fi1qmL4iuhH8t7G7r2H&Expires=1580590721&Signature=ephEtIe0y3qU%2Fzrrg%2BXQi1K%2FSRs%3D')
+    loadingTask.promise.then(function (pdf) {
+      pdf.getPage(1).then(function (page) {
+        const scale = 1.5
+        const viewport = page.getViewport({ scale: scale })
+
+        //
+        // Prepare canvas using PDF page dimensions
+        //
+        const canvas = document.getElementById('pdf-canvas')
+        const context = canvas.getContext('2d')
+        canvas.height = viewport.height
+        canvas.width = viewport.width
+
+        //
+        // Render PDF page into canvas context
+        //
+        const renderContext = {
+          canvasContext: context,
+          viewport: viewport
+        }
+        page.render(renderContext)
+      })
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>

+ 3 - 0
src/utils/pdf.js

@@ -0,0 +1,3 @@
+import pdfjs from 'pdfjs'
+
+export default pdfjs

+ 10 - 4
src/views/reader/PdfReader.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <pdf></pdf>
+  <div class="pdf-reader">
+  <pdf></pdf>
   </div>
 </template>
 
@@ -8,10 +8,16 @@
 import Pdf from '@/components/Pdf'
 
 export default {
-  components: { Pdf }
+  components: { Pdf },
+  mounted () {}
 }
 </script>
 
 <style lang="scss" scoped>
-
+.pdf-reader {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>