|
@@ -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));
|
|
|
}
|
|
|
}
|
|
|
}
|