|  | @@ -10,10 +10,80 @@
 | 
	
		
			
				|  |  |  <script>
 | 
	
		
			
				|  |  |    import { getExtend, readBuffer, render } from '@/utils/util';
 | 
	
		
			
				|  |  |    import { parse } from 'qs';
 | 
	
		
			
				|  |  | +  import axios from 'axios'
 | 
	
		
			
				|  |  |    export default {
 | 
	
		
			
				|  |  |      data() {
 | 
	
		
			
				|  |  |        return {
 | 
	
		
			
				|  |  |          loading: false,
 | 
	
		
			
				|  |  | +        url: '',
 | 
	
		
			
				|  |  | +        fileName: '',
 | 
	
		
			
				|  |  | +        id: ''
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    created() {
 | 
	
		
			
				|  |  | +      this.loading = true
 | 
	
		
			
				|  |  | +      this.url = this.$route.query.url || ''
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      this.fileName = this.$route.query.fileName || ''
 | 
	
		
			
				|  |  | +      this.id = this.$route.query.id || ''
 | 
	
		
			
				|  |  | +      console.log(this.url)
 | 
	
		
			
				|  |  | +      console.log(this.fileName)
 | 
	
		
			
				|  |  | +      console.log(this.id)
 | 
	
		
			
				|  |  | +      if(this.url != '') {
 | 
	
		
			
				|  |  | +        this.getLoadEnclosure();
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    methods: {
 | 
	
		
			
				|  |  | +      getLoadEnclosure() {
 | 
	
		
			
				|  |  | +        const filename = this.fileName
 | 
	
		
			
				|  |  | +        axios({
 | 
	
		
			
				|  |  | +          url: "http://124.232.146.72:7015/api/common/attach/"+this.id,
 | 
	
		
			
				|  |  | +          method: 'get',
 | 
	
		
			
				|  |  | +          responseType: 'blob',
 | 
	
		
			
				|  |  | +        }).then(({ data }) => {
 | 
	
		
			
				|  |  | +          if (!data) {
 | 
	
		
			
				|  |  | +            console.error('文件下载失败');
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +          const file = new File([ data ], filename, {});
 | 
	
		
			
				|  |  | +          this.handleChange({ target: { files: [ file ] } });
 | 
	
		
			
				|  |  | +        }).finally(() => {
 | 
	
		
			
				|  |  | +          this.loading = false;
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      async handleChange(e) {
 | 
	
		
			
				|  |  | +        this.loading = true;
 | 
	
		
			
				|  |  | +        try {
 | 
	
		
			
				|  |  | +          const [ file ] = e.target.files;
 | 
	
		
			
				|  |  | +          this.filename = file.name && decodeURIComponent(file.name) || '';
 | 
	
		
			
				|  |  | +          const arrayBuffer = await readBuffer(file);
 | 
	
		
			
				|  |  | +          this.loading = false
 | 
	
		
			
				|  |  | +          this.last = await this.displayResult(arrayBuffer, file)
 | 
	
		
			
				|  |  | +          console.log("last")
 | 
	
		
			
				|  |  | +          console.log(this.last)
 | 
	
		
			
				|  |  | +        } catch (e) {
 | 
	
		
			
				|  |  | +          console.error(e)
 | 
	
		
			
				|  |  | +        } finally {
 | 
	
		
			
				|  |  | +          this.loading = false
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      displayResult(buffer, file) {
 | 
	
		
			
				|  |  | +        // 取得文件名
 | 
	
		
			
				|  |  | +        const { name } = file;
 | 
	
		
			
				|  |  | +        // 取得扩展名
 | 
	
		
			
				|  |  | +        const extend = getExtend(name);
 | 
	
		
			
				|  |  | +        // 输出目的地
 | 
	
		
			
				|  |  | +        const { output } = this.$refs;
 | 
	
		
			
				|  |  | +        // 生成新的dom
 | 
	
		
			
				|  |  | +        const node = document.createElement('div');
 | 
	
		
			
				|  |  | +        // 添加孩子,防止vue实例替换dom元素
 | 
	
		
			
				|  |  | +        if (this.last) {
 | 
	
		
			
				|  |  | +          output.removeChild(this.last.$el);
 | 
	
		
			
				|  |  | +          this.last.$destroy();
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        const child = output.appendChild(node);
 | 
	
		
			
				|  |  | +        // 调用渲染方法进行渲染
 | 
	
		
			
				|  |  | +        return new Promise((resolve, reject) => render(buffer, extend, child)
 | 
	
		
			
				|  |  | +            .then(resolve).catch(reject));
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 |