|
|
@@ -0,0 +1,202 @@
|
|
|
+<template>
|
|
|
+ <div class="safetyCommitmentLetter-max-big-box">
|
|
|
+ <div class="max-img-box" ref="viewBox" v-if="showType">
|
|
|
+ <transition name="fade" mode="in-out">
|
|
|
+ <vue-office-docx
|
|
|
+ v-if="officeType === 'docx'&&!officeNullType"
|
|
|
+ :src="lookUrl"
|
|
|
+ :class="pdfType == 1?'':'vertical'"
|
|
|
+ @rendered="renderedHandler"
|
|
|
+ @error="errorHandler"
|
|
|
+ />
|
|
|
+ <vue-office-excel
|
|
|
+ v-if="officeType === 'excel'&&!officeNullType"
|
|
|
+ :src="lookUrl"
|
|
|
+ @rendered="renderedHandler"
|
|
|
+ @error="errorHandler"
|
|
|
+ />
|
|
|
+ <vue-office-pdf
|
|
|
+ v-if="officeType === 'pdf'&&!officeNullType"
|
|
|
+ :src="lookUrl"
|
|
|
+ :class="pdfType == 1?'':'vertical'"
|
|
|
+ @rendered="renderedHandler"
|
|
|
+ @error="errorHandler"/>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ //引入VueOfficeDocx组件
|
|
|
+ import VueOfficeDocx from '@vue-office/docx'
|
|
|
+ import '@vue-office/docx/lib/index.css'
|
|
|
+ //引入VueOfficeExcel组件
|
|
|
+ import VueOfficeExcel from '@vue-office/excel'
|
|
|
+ import '@vue-office/excel/lib/index.css'
|
|
|
+ //引入VueOfficePdf组件
|
|
|
+ import VueOfficePdf from '@vue-office/pdf'
|
|
|
+ export default {
|
|
|
+ name: 'safetyCommitmentLetter',
|
|
|
+ components: {
|
|
|
+ VueOfficeDocx,
|
|
|
+ VueOfficeExcel,
|
|
|
+ VueOfficePdf,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ answerKeyPropsData: {}
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showType:false,
|
|
|
+ officeNullType:false,
|
|
|
+ //文档类型
|
|
|
+ officeType:null,
|
|
|
+ //文档名称
|
|
|
+ lookName:"",
|
|
|
+ //文档地址
|
|
|
+ lookUrl:"",
|
|
|
+ currentPage: 1,
|
|
|
+ totalPages: 1,
|
|
|
+ currentScale: 1.0, // 初始缩放比例
|
|
|
+ pdfType:1,
|
|
|
+ buttonState:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initialize('安全承诺书','http://192.168.1.88/statics/study/bigFile/2026/09/29/f2384978-355f-4dab-ba05-7738e8423a30.docx','docx');
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //初始化
|
|
|
+ initialize(name,url,type){
|
|
|
+ let self = this;
|
|
|
+ this.$set(this,'officeNullType',true);
|
|
|
+ this.$set(this,'showType',false);
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ if(name&&url&&type){
|
|
|
+ this.$set(this,'officeType',type);
|
|
|
+ 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) {
|
|
|
+ // 解析失败保持默认纵向
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .vertical{
|
|
|
+ ::v-deep .docx{
|
|
|
+ padding:0!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .safetyCommitmentLetter-max-big-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .max-img-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .office-null-text{
|
|
|
+ line-height:700px;
|
|
|
+ text-align: center;
|
|
|
+ color:#dedede;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ .video-box{
|
|
|
+ width:1458px;
|
|
|
+ height:797px;
|
|
|
+ }
|
|
|
+ .rich-text-box {
|
|
|
+ padding:20px 100px;
|
|
|
+ flex:1;
|
|
|
+ background-color: #fff;
|
|
|
+ line-height: 1.6; /* 基础行高 */
|
|
|
+ word-break: break-word; /* 防止长单词或长链接撑破布局 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 穿透样式，控制富文本内部的标签 */
|
|
|
+ .rich-text-box ::v-deep img {
|
|
|
+ max-width: 100% !important; /* 防止图片超出容器 */
|
|
|
+ height: auto !important;
|
|
|
+ display: block;
|
|
|
+ margin: 10px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rich-text-box ::v-deep table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rich-text-box ::v-deep p {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //滚动条样式
|
|
|
+ .max-img-box::-webkit-scrollbar{
|
|
|
+ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+ .max-img-box::-webkit-scrollbar-thumb{
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #D3D7D4;
|
|
|
+ }
|
|
|
+ .max-img-box::-webkit-scrollbar-track{
|
|
|
+ -webkit-box-shadow: inset 0 0 5px #FFFFFF;
|
|
|
+ border-radius: 0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ //滚动条样式
|
|
|
+ ::v-deep .ofd-footer{
|
|
|
+ padding:10px 0;
|
|
|
+ }
|
|
|
+ ::v-deep .ofd-body::-webkit-scrollbar{
|
|
|
+ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+ ::v-deep .ofd-body::-webkit-scrollbar-thumb{
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #D3D7D4;
|
|
|
+ }
|
|
|
+ ::v-deep .ofd-body::-webkit-scrollbar-track{
|
|
|
+ -webkit-box-shadow: inset 0 0 5px #FFFFFF;
|
|
|
+ border-radius: 0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
dedsudiyu