测试在线编制

licp

2024-04-03 ebafa0caac76450802535f0952457e86c4ea2962

测试在线编制

 src/assets/api/controller.js

@@ -180,4 +180,5 @@

const insReport = {
  pageInsReport: "/insReport/pageInsReport", //查询检验报告数据
  wordToHtml: "/insReport/wordToHtml", //Word转HTML
}

 src/components/view/b1-report-preparation.vue

@@ -72,6 +72,7 @@
                    <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
                </div>
            </div>
      <!-- <input id="input" type="file" accept=".doc,.docx"></input> -->
            <div class="table">
                <ValueTable ref="ValueTable" :url="$api.insReport.pageInsReport" :componentData="componentData"
                    :key="upIndex"/>
@@ -82,7 +83,7 @@
        <i class="el-icon-full-screen" style="cursor: pointer;font-size: 18px" @click="fullscreen=true;" v-if="!fullscreen"></i>
        <img src="../../../static/img/no-full.svg" alt="" v-else style="cursor: pointer;" @click="fullscreen=false;" >
      </div>
      <Word :style="fullscreen?'height:83vh':'height:70vh'" v-if="claimVisible" ref="Word" :value="value"/>
      <Word :style="{height:fullscreen?'82':'70'+'vh'}" v-if="claimVisible" ref="Word" :value="value"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="claimVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="confirmClaim">ç¡® å®š</el-button>
@@ -94,7 +95,8 @@
<script>
  import ValueTable from '../tool/value-table.vue'
  import Word from '../tool/word.vue'
  // import convertFileToHtml from '../../util/file';
  import file from '../../util/file';
  import { convertToHtml } from 'mammoth';
    export default {
        components: {
            ValueTable,
@@ -198,12 +200,39 @@
        statusList: [],
        claimVisible: false,
        fullscreen:false,
        value:''
        value:``
      }
    },
    mounted() {
      this.entityCopy = this.HaveJson(this.componentData.entity)
      this.getPower()

      // let that = this;
      // let input = document.getElementById('input');
      // input.onchange = function(){
      //   let file = this.files[0];
      //   let reader = new FileReader();
      //   reader.readAsArrayBuffer(file);
      //   reader.onload = function(loadEvent){
      //     convertToHtml({
      //     arrayBuffer: loadEvent.target.result })
      //     .then(res=>{
      //       that.value = res.value
      //         .replace('<h1>', '<h1 style="text-align: center;">')
      //         .replace('<h2>', '<h2 style="text-align: center;">')
      //         .replace('<img ','<img style="height:3.6cm;width:3.6cm"')
      //         .replace(/<table>/g, '<table style="border-collapse: collapse;border: 1px solid #000;">')
      //         .replace(/<tr>/g, '<tr style="height: 30px;">')
      //         .replace(/<td>/g, '<td style="border: 1px solid #000;">')
      //         .replace(/<p>/g, '<p style="text-indent: 2em;">')
      //         .replace(/<a [^>]*>/g, "")
      //         .replace(/<\/a>/g, "")
      //       console.log(11111111111,that.value)
      //       that.claimVisible = true;
      //     })
      //     .done();
      //   }
      // }
    },
    methods: {
      refreshTable() {
@@ -213,8 +242,22 @@
        this.componentData.entity = this.HaveJson(this.entityCopy)
        this.upIndex++
      },
      handleWeave() {
      async handleWeave(row) {
        // this.value = await file.convertFileToHtml(row.url)
        // this.claimVisible = true;
        this.$axios.post(this.$api.insReport.wordToHtml, {
          path:row.url
          }).then(res => {
                    if (res.code === 200) {
            // console.log(11111111,res.data)
            this.value = res.data.replace(/<a [^>]*>/g, "")
              .replace(/<\/a>/g, "").replace(/&nbsp;/g, "&nbsp;&nbsp;");
        this.claimVisible = true;
                    }

                }).catch(error => {
                    console.error(error)
                })
      },
      // æƒé™åˆ†é…
      getPower(radio) {
@@ -238,10 +281,10 @@
        this.upLoad = false;
      },
      confirmClaim() {
        console.log(this.$refs.Word.getValue())
        // console.log(this.$refs.Word.getValue())
      },
      selectAllByOne(row){
        console.log(row);
      async selectAllByOne(row){
        console.log(row,await file.convertFileToHtml(row.url));
      }
    }
  }

 src/util/file.js

@@ -1,47 +1,41 @@
import * as pdfjsLib from 'pdfjs-dist';
import { convertToHtml } from 'mammoth';
import Vue from 'vue'

export default {
  methods: {
    convertFileToHtml(file) {
      const fileType = file.type.split('/')[1];
      const fileExtension = fileType === 'pdf' ? '.pdf' : '.docx';

      // å°†æ–‡ä»¶è½¬æ¢ä¸ºBlob对象
      const fileReader = new FileReader();
      fileReader.onload = async (event) => {
        const arrayBuffer = event.target.result;
        const byteArray = new Uint8Array(arrayBuffer);
        const blob = new Blob([byteArray], { type: fileType + fileExtension });

        if (fileType === 'pdf') {
          // ä½¿ç”¨pdfjsLib将PDF转换为HTML
          const pdfData = await pdfjsLib.getDocument(blob).promise;
          const pageNumber = 1;
          const scale = 1;
          const viewport = pageNumber * scale;
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');
          canvas.width = pdfData.internal.pageSize.getWidth() * scale;
          canvas.height = pdfData.internal.pageSize.getHeight() * scale;
          const renderContext = {
            canvasContext: context,
            viewport: viewport,
          };
          const renderTask = pdfData.getPage(pageNumber).render(renderContext);
          await renderTask.promise;
          const base64Image = canvas.toDataURL('image/png');

          // å°†base64Image转换为HTML
          const htmlContent = `<img src="${base64Image}" />`;
          return htmlContent;
        } else if (fileType === 'docx') {
  async convertFileToHtml(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', Vue.prototype.javaApi+url, true);//获取文件流的接口
    xhr.send();
    xhr.responseType = "blob";//不能漏
    let xhrPromise = new Promise((resolve, reject) => {
      xhr.onload = async function () {
        if (this.status === 200) {
          // è¿”回的文件流，转换成blob对象
          var blob = new Blob([this.response],{ type:'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
          // ä½¿ç”¨mammoth将Word转换为HTML
          const htmlContent = await convertToHtml(blob, { format: 'html' });
          return htmlContent;
        }
          let reader = new FileReader();
          reader.readAsArrayBuffer(blob);
          let htmlContentPromise = new Promise((resolve, reject) => {
            reader.onload = async function () {
              var arrayBuffer = xhr.response; //arrayBuffer
              const result = await convertToHtml({ arrayBuffer: arrayBuffer })
              let html = result.value.replace(//g, '')
              .replace('<h1>', '<h1 style="text-align: center;">')
              .replace(/<table>/g, '<table style="border-collapse: collapse;border: 1px solid #000;">')
              .replace(/<tr>/g, '<tr style="height: 30px;">')
              .replace(/<td>/g, '<td style="border: 1px solid #000;">')
              .replace(/<p>/g, '<p style="text-indent: 2em;">')
              .replace(/<a [^>]*>/g, "")
              .replace(/<\/a>/g, "")
              // .replace(/em/g, "cm");
              resolve(html)
      };
      fileReader.readAsArrayBuffer(blob);
    },
          })
          resolve(await htmlContentPromise)
        }

      }
    })
    return await xhrPromise
  },
};

 static/¼ì²â±¨¸æÄ£°å2020-11-09.docx

Binary files differ