|
|
@@ -27,10 +27,6 @@
|
|
|
<p class="position-download-p el-icon-download" @click="downloadOffice" v-if="!officeNullType&&officeType!='text'"></p>
|
|
|
<p class="title-p">{{lookName}}</p>
|
|
|
<!--关闭按钮-->
|
|
|
- <div class="top-button-box" v-if="officeType === 'docx'&&!officeNullType">
|
|
|
- <p :class="pdfType==1?'check-p':''" @click="buttonCheck(1)">纵向预览</p>
|
|
|
- <p :class="pdfType==2?'check-p':''" @click="buttonCheck(2)">横向预览</p>
|
|
|
- </div>
|
|
|
<p class="position-off-p el-icon-circle-close" @click="outButton"></p>
|
|
|
</div>
|
|
|
<div class="max-img-box" ref="viewBox">
|
|
|
@@ -51,6 +47,7 @@
|
|
|
<vue-office-pdf
|
|
|
v-if="officeType === 'pdf'&&!officeNullType"
|
|
|
:src="lookUrl"
|
|
|
+ :class="pdfType == 1?'':'vertical'"
|
|
|
@rendered="renderedHandler"
|
|
|
@error="errorHandler"/>
|
|
|
<p v-if="officeNullType" class="office-null-text">加载失败...</p>
|
|
|
@@ -70,6 +67,7 @@
|
|
|
import '@vue-office/excel/lib/index.css'
|
|
|
//引入VueOfficePdf组件
|
|
|
import VueOfficePdf from '@vue-office/pdf'
|
|
|
+ import JSZip from 'jszip'
|
|
|
export default {
|
|
|
name: 'fullScreenFileLook',
|
|
|
components: {
|
|
|
@@ -107,11 +105,36 @@
|
|
|
this.$set(this,'lookName',name);
|
|
|
this.$set(this,'lookUrl',url);
|
|
|
this.$set(this,'officeNullType',false);
|
|
|
+ this.$set(this,'pdfType',1);
|
|
|
this.$set(this,'showType',true);
|
|
|
+ if(type === 'docx'){
|
|
|
+ this._detectDocxOrientation(url);
|
|
|
+ }
|
|
|
}else{
|
|
|
this.msgError('文件参数异常')
|
|
|
}
|
|
|
},
|
|
|
+ // 解析 docx XML 自动判断纸张方向,设置 pdfType(1纵向 2横向)
|
|
|
+ async _detectDocxOrientation(url) {
|
|
|
+ try {
|
|
|
+ const res = await fetch(url);
|
|
|
+ const buf = await res.arrayBuffer();
|
|
|
+ const zip = await JSZip.loadAsync(buf);
|
|
|
+ const xmlStr = await zip.file('word/document.xml').async('string');
|
|
|
+ const orientMatch = xmlStr.match(/w:pgSz[^/]*?w:orient="([^"]+)"/);
|
|
|
+ if (orientMatch) {
|
|
|
+ this.$set(this, 'pdfType', orientMatch[1] === 'landscape' ? 2 : 1);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 无 orient 属性时比较 w:w 与 w:h
|
|
|
+ const sizeMatch = xmlStr.match(/w:pgSz[^/]*?w:w="(\d+)"[^/]*?w:h="(\d+)"/);
|
|
|
+ if (sizeMatch) {
|
|
|
+ this.$set(this, 'pdfType', parseInt(sizeMatch[1]) > parseInt(sizeMatch[2]) ? 2 : 1);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ // 解析失败保持默认纵向
|
|
|
+ }
|
|
|
+ },
|
|
|
//文件加载成功
|
|
|
renderedHandler() {
|
|
|
this.$set(this,'officeNullType',false);
|
|
|
@@ -146,20 +169,10 @@
|
|
|
// 释放 Blob URL
|
|
|
window.URL.revokeObjectURL(url)
|
|
|
},
|
|
|
- //DOCX排版样式切换
|
|
|
- buttonCheck(val){
|
|
|
- if(this.pdfType != val){
|
|
|
- this.$set(this,'pdfType',val);
|
|
|
- }
|
|
|
- },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
- //横竖排版
|
|
|
- .horizontal{
|
|
|
-
|
|
|
- }
|
|
|
.vertical{
|
|
|
::v-deep .docx{
|
|
|
padding:0!important;
|
|
|
@@ -195,34 +208,6 @@
|
|
|
text-align: center;
|
|
|
line-height:50px;
|
|
|
}
|
|
|
- .top-button-box{
|
|
|
- display: flex;
|
|
|
- color:#fff;
|
|
|
- line-height:30px;
|
|
|
- text-align: center;
|
|
|
- font-size:14px;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 999;
|
|
|
- margin:10px 40px 0 0;
|
|
|
- border-radius: 4px;
|
|
|
- overflow: hidden;
|
|
|
- height:30px;
|
|
|
- p{
|
|
|
- width:100px;
|
|
|
- height:30px;
|
|
|
- background-color: #999;
|
|
|
- color:#fff;
|
|
|
- }
|
|
|
- p:nth-child(1){
|
|
|
-
|
|
|
- }
|
|
|
- p:nth-child(2){
|
|
|
- }
|
|
|
- .check-p{
|
|
|
- background-color: #0183fa;
|
|
|
- color:#fff;
|
|
|
- }
|
|
|
- }
|
|
|
.position-off-p{
|
|
|
color:#fff;
|
|
|
width:30px;
|