fixed pdf

.env.development

@@ -11,4 +11,6 @@ VUE_APP_BASE_API = '/dev-api'
 # when you have a large number of pages.
 # Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
 
-VUE_CLI_BABEL_TRANSPILE_MODULES = true
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+VUE_APP_PDF = '/pdf'

.env.production

@@ -4,3 +4,4 @@ ENV = 'production'
 # base api
 VUE_APP_BASE_API = ''
 
+VUE_APP_PDF = ''

src/components/Adult/inputModules/UploadPdf.vue

@@ -1,11 +1,11 @@
 <!--  -->
 <template>
-  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
+  <div v-if="curQue" class="Big-Book-prev-Textdes Tinydemo">
     <UploadView
-      :changeFillId="changeFillId"
+      :change-fill-id="changeFillId"
       :accept="accept"
-      :filleNumber="1"
-      :fileList="curQue.fileList"
+      :fille-number="1"
+      :file-list="curQue.fileList"
       :type="type"
     />
   </div>
@@ -38,7 +38,22 @@ export default {
   },
   computed: {},
   watch: {},
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if (!this.curQue) {
+      this.initcurQue();
+    }
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
     remove() {
       // this.data = null;
@@ -50,24 +65,21 @@ export default {
       this.curQue.fileList = JSON.parse(JSON.stringify(fileList));
       if (fileList.length > 0) {
         this.curQue.data = fileList[0]?.response?.file_info_list[0];
-        this.curQue.data.fileRelativePath =
-          process.env.VUE_APP_BASE_API + this.curQue.data.file_relative_path;
-          this.getNumPages()
+        this.curQue.data.fileRelativePath = this.curQue.data.file_relative_path;
+        this.getNumPages();
       }
     },
     // 获取pdf的页数
     getNumPages() {
       let _this = this;
-      let loadingTask = pdf.createLoadingTask(
-        _this.curQue.data.fileRelativePath
-      );
+      let loadingTask = pdf.createLoadingTask(`${process.env.VUE_APP_PDF}${_this.curQue.data.fileRelativePath}`);
       loadingTask.promise
-        .then((pdff) => {
+        .then(pdff => {
           _this.numPages = pdff.numPages;
           _this.curQue.data.numPages = pdff.numPages;
           this.$forceUpdate();
         })
-        .catch((err) => {
+        .catch(err => {
           this.$message.success("pdf 加载失败", err);
           this.data = null;
           this.curQue.data = null;
@@ -80,22 +92,7 @@ export default {
       data = JSON.parse(JSON.stringify(this.data_structure));
       this.changeCurQue(data);
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    if (!this.curQue) {
-      this.initcurQue();
-    }
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='scss' scoped>

src/components/Adult/preview/PdfView.vue

@@ -1,86 +1,60 @@
 <template>
-    <div class="pdfView-box">
-        <div class="pdfView">
-            <pdf
-                ref="pdf"
-                :src="curQue.data.fileRelativePath"
-                v-for="i in curQue.data.numPages"
-                :key="i"
-                :page="i"
-                @progress="loadedRatio = $event"
-            >
-            </pdf>
-        </div>
-        <div class="progress" v-show="loadedRatio!==1">
-            <el-progress type="circle" :width="70" color="#53a7ff" :percentage="Math.floor(loadedRatio*100)"></el-progress>
-            <br/>
-            <span>{{remindShow}}</span>
-        </div>
+  <div class="pdfView-box">
+    <div class="pdfView">
+      <pdf
+        v-for="i in curQue.data.numPages"
+        ref="pdf"
+        :key="i"
+        :src="pdfSrc"
+        :page="i"
+        @progress="loadedRatio = $event"
+      />
     </div>
+    <div v-show="loadedRatio!==1" class="progress">
+      <el-progress type="circle" :width="70" color="#53a7ff" :percentage="Math.floor(loadedRatio*100)" />
+      <br>
+      <span>{{ remindShow }}</span>
+    </div>
+  </div>
 </template>
 
 <script>
-//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》from ‘《组件路径》';
 import pdf from "vue-pdf";
 
 export default {
-  //import引入的组件需要注入到对象中才能使用
+  // import引入的组件需要注入到对象中才能使用
   components: { pdf },
   props: ["curQue", "fn_data", "type"],
 
   data() {
-    //这里存放数据
+    // 这里存放数据
     return {
       numPages: null,
       remindShow: "加载文件中，文件较大请耐心等待...",
       loadedRatio: 0,
+      pdfSrc: ''
     };
   },
-  //计算属性 类似于data概念
-  computed: {},
-  //监控data中数据变化
-  watch: {},
-  //方法集合
+  created() {
+    this.getNumPages();
+  },
   methods: {
     getNumPages() {
-      let _this = this;
-      let loadingTask = pdf.createLoadingTask(
-        _this.curQue.data.fileRelativePath
-      );
-      this.$forceUpdate();
-
+      let str = this.curQue.data.fileRelativePath;
+      str.replace(process.env.VUE_APP_BASE_API, '');
+      let loadingTask = pdf.createLoadingTask(`${process.env.VUE_APP_PDF}${str}`);
       loadingTask.promise
-        .then((pdff) => {
+        .then(pdff => {
           console.log("拿到结果");
-          _this.numPages = pdff.numPages;
-          _this.curQue.data.numPages = pdff.numPages;
-          this.$forceUpdate();
+          this.pdfSrc = loadingTask;
+          this.numPages = pdff.numPages;
+          this.curQue.data.numPages = pdff.numPages;
         })
-        .catch((err) => {
+        .catch(err => {
           console.error("pdf 加载失败", err);
         });
     },
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  //生命周期-创建之前
-  beforeCreated() {},
-  //生命周期-挂载之前
-  beforeMount() {},
-  //生命周期-更新之前
-  beforUpdate() {},
-  //生命周期-更新之后
-  updated() {},
-  //生命周期-销毁之前
-  beforeDestory() {},
-  //生命周期-销毁完成
-  destoryed() {},
-  //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
 };
 </script>
 <style scoped>
@@ -99,4 +73,4 @@ export default {
     width: 500px;
     margin-right: -250px;
 }
-</style>
+</style>

vue.config.js

@@ -1,22 +1,22 @@
-'use strict'
-const path = require('path')
-const defaultSettings = require('./src/settings.js')
+
+const path = require('path');
+const defaultSettings = require('./src/settings.js');
 const CompressionPlugin = require('compression-webpack-plugin');
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
 
-const name = defaultSettings.title || '发展汉语' // page title
+const name = defaultSettings.title || '发展汉语'; // page title
 
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run
 // You can change the port by the following methods:
 // port = 9528 npm run dev OR npm run dev --port = 9528
-const port = process.env.port || process.env.npm_config_port || 9560 // dev port
+const port = process.env.port || process.env.npm_config_port || 9560; // dev port
 
-const webpack = require('webpack')
+const webpack = require('webpack');
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
@@ -33,7 +33,7 @@ module.exports = {
   lintOnSave: false,
   productionSourceMap: false,
   devServer: {
-    port: port,
+    port,
     open: true,
     overlay: {
       warnings: false,
@@ -44,20 +44,28 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         target: `http://gcls.utschool.cn/`,
-        //target: `http://gcls.helxsoft.cn/`,
+        // target: `http://gcls.helxsoft.cn/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
+      [process.env.VUE_APP_PDF]: {
+        // target: 'https://file-kf.helxsoft.cn/',
+        target: 'https://file-cs.helxsoft.cn/',
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_PDF]: ''
+        }
+      }
     },
 
-    after: require('./mock/mock-server.js')
+    // after: require('./mock/mock-server.js')
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
-    name: name,
+    name,
     resolve: {
       alias: {
         '@': resolve('src')
@@ -85,16 +93,16 @@ module.exports = {
       // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
       fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
       include: 'initial'
-    }])
+    }]);
 
     // when there are many pages, it will cause too many meaningless requests
-    config.plugins.delete('prefetch')
+    config.plugins.delete('prefetch');
 
     // set svg-sprite-loader
     config.module
       .rule('svg')
       .exclude.add(resolve('src/icons'))
-      .end()
+      .end();
     config.module
       .rule('icons')
       .test(/\.svg$/)
@@ -105,7 +113,7 @@ module.exports = {
       .options({
         symbolId: 'icon-[name]'
       })
-      .end()
+      .end();
 
     config.when(process.env.NODE_ENV !== 'development', config => {
       config
@@ -115,7 +123,7 @@ module.exports = {
           // `runtime` must same as runtimeChunk name. default is `runtime`
           inline: /runtime\..*\.js$/
         }])
-        .end()
+        .end();
       config.optimization.splitChunks({
         chunks: 'all',
         cacheGroups: {
@@ -138,9 +146,9 @@ module.exports = {
             reuseExistingChunk: true
           }
         }
-      })
+      });
       // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-      config.optimization.runtimeChunk('single')
-    })
+      config.optimization.runtimeChunk('single');
+    });
   }
-}
+};