Vue sample code for online preview of office files

I'm working on electronic archives recently, and the backend provides the Huawei Cloud OSS link for the files. The function of clicking to download a file has been implemented. However, they hope that they can preview regular files directly without downloading them.

Logically speaking, to do online preview of files, you can just buy a third-party service, deploy the service on the back end, and connect it to the front end, and everything will be done.
If you can't withstand the third party, you will basically have to pay money. If you don't want to spend money, what other solutions are there?

Method 1

Preview online with Microsoft Office Online

https://view.officeapps.live.com/op/view.aspx?src=File address Example: https://view.officeapps.live.com/op/view.aspx?src=http://www.xxx.com/xxx.ppt

Method 2

Use the online preview of docx cloud service, the usage is similar to Microsoft

http://view.xdocin.com/xdoc?_xdoc=文件地址

The premise is that the file address provided by the backend must be a publicly accessible link. For example, here we upload the file to Huawei Cloud. The file can only be viewed, not edited.

The effect is as follows

On the code

    <!-- Preview Icon -->
                  <i
                    v-if="row.doc_url && canPreviewList.includes(row.doc_ext)"
                    style="font-weight: bold;font-size:16px;"
                    class="link-type el-icon-view"
                    @click.stop="previewFileEvent(row)"
                  />

    previewFileEvent(row) {
      const typeArr = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
      let url = ''
      if (typeArr.indexOf(row.doc_ext) !== -1) {
        // Use Microsoft Office Online
        url = 'http://view.officeapps.live.com/op/view.aspx?src=' + row.doc_url
      } else {
        url = row.doc_url
      }
      // window.open() opens in the center const width = 1000; const height = 800
      const top = (window.screen.availHeight - height) / 2
      const left = (window.screen.availWidth - width) / 2
      window.open(url, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)
    }

I am using the service provided by Microsoft. Can be used to open 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx' files.
Some processing has been done on other files, such as PDF and image files, which can be opened directly through links, and the browser supports direct preview.
For other files that cannot be previewed, I have restricted them so that the preview icon is not displayed.

There is a problem here. The txt file is garbled when opened directly in the browser. The download was normal, no solution was found.
If anyone knows, please bring it along. O(∩_∩)O

The reason why the txt file is garbled has been found. It's related to the browser's encoding format.

The txt file I have here is saved in utf-8 encoding. But the default browser is not Google Chrome.

It needs to be modified to the corresponding encoding format for the display to be normal.

To modify the encoding format of Google Chrome, you need to install an official plug-in Set Character Encoding from the App Store
After installation, right-click on the page to modify the encoding format.

This is the end of this article about the sample code of Vue to realize online preview of office files. For more relevant Vue online preview of office content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!