excel、word、pdf、视频、持久化

node版本

v14.21.3

ONLYOFFICE官网：https://www.onlyoffice.com/zh/
Github地址：https://github.com/ONLYOFFICE

https://www.onlyoffice.com/zh/see-it-in-action.aspx

启动外网

npm run dev:howso-local

是否开启全局免登录用于非内网开发

VUE_APP_NO_AUTH = true

安装复制黏贴 clipboard

npm install clipboard –save

或者

yarn add clipboard


<template>  
  <div>  
    <button class="btn" ref="clipboardId" data-clipboard-text="要复制的文本">复制</button>  
  </div>  
</template>  

<script>  
import ClipboardJS from 'clipboard';  

export default {  
  mounted() {  
      this.initClipboard();
  },  
  methods(){
    initClipboard(item){
        this.clipboard = new ClipboardJS(this.$refs.clipboardId);    
        this.clipboard.on('success', (e) => {  
           alert('复制成功');
           e.clearSelection(); // 清除选中文本  
        });  

        this.clipboard.on('error', (e) => {  
           alert('复制成功');
        });  
    }
  },
  beforeDestroy() {  
    // 组件销毁前销毁 Clipboard 实例  
    if (this.clipboard) {  
      this.clipboard.destroy();  
    }  
  }  
};  
</script>  

<style scoped>  
.btn {  
  /* 你的样式 */  
}  
</style>

markdown 组件 vue-markdown

npm install –save vue-markdown highlight.js marked

<template>  
  <div>  
    <markdown :source="markdownContent"></markdown>  
  </div>  
</template>  

<script>  

import VueMarkdown from 'vue-markdown'  
import hljs from 'highlight.js'
// import 'highlight.js/styles/default.css'
import 'highlight.js/styles/github.css'

export default {  
  components: {  
    markdown: VueMarkdown  
  },  
  data() {  
    return {  
      markdownContent: '```javascript\nfunction helloWorld() {\n  console.log("Hello, world!");\n}\n```'  
    }  
  },
  mounted() {
    //#region 注册 markdown-it-highlightjs 插件  
    this.$nextTick(() => {
      document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
      });

      document.querySelectorAll('pre code').forEach(block => {
        this.onMdRenderer(block)
      })
    }); 
    this.initClipboard();
    //#endregion 注册 markdown-it-highlightjs 插件  
  },
  methods:{
   onMdRenderer(block) {
      // 创建一个新的复制按钮
      const copyButton = document.createElement('div')
      copyButton.textContent = '复制代码'
      copyButton.setAttribute('id', 'clipboardId')
      copyButton.setAttribute('data-clipboard-text', '要复制的文本333')
      copyButton.classList.add('copy-code')
      copyButton.style.clear = 'both'
      block.style.width = '100%'

      // 设置按钮的点击事件监听器
      copyButton.addEventListener('click', () => {
        // 获取代码文本
        const codeText = codeElement.textContent || codeElement.innerText

        // 创建一个临时的 <textarea> 元素来复制文本
        const textArea = document.createElement('textarea')
        textArea.style.position = 'fixed'
        textArea.style.top = 0
        textArea.style.left = 0
        textArea.style.width = '2em'
        textArea.style.height = '2em'
        textArea.style.padding = 0
        textArea.style.border = 'none'
        textArea.style.outline = 'none'
        textArea.style.boxShadow = 'none'
        textArea.style.background = 'transparent'
        textArea.value = codeText

        // 将 <textarea> 添加到文档中
        document.body.appendChild(textArea)

        // 选择文本
        textArea.focus()
        textArea.select()

        // 复制选定的文本
        try {
          const successful = document.execCommand('copy')
          const msg = successful ? '成功复制' : '复制失败'
          console.log(msg)
        } catch (err) {
          console.error('复制失败: ', err)
        }

        // 移除 <textarea> 元素
        document.body.removeChild(textArea)
      })

      // 将按钮插入到 <pre> 元素之前
      block.parentNode.insertBefore(copyButton, block)
    },
  }
}  
</script>

图片查看器(待验证)

npm install –save viewerjs

npm install –save v-viewer
或
yarn add v-viewer


<template>
  <div>
    <!-- Your other components and content --> 
    <v-viewer :images="options.viewer.images" :options="options.viewer.images"></v-viewer>
  </div>
</template>

<script>

import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

export default {
  data() {
    return {
      options:{        
        viewer:{
          images:[
            { src: 'path/to/image1.jpg', alt: 'Image 1' },
            { src: 'path/to/image2.jpg', alt: 'Image 2' },
            // Add more images as needed
          ],
          options: {            
              index: 0,        // 初始显示图像的索引
              title: false,    // 是否显示图像标题
              toolbar: true,   // 是否显示工具栏
              navbar: true,    // 是否显示导航栏
              tooltip: true,   // 是否显示缩放和旋转工具提示
              movable: true,   // 是否允许拖动
              zoomable: true,  // 是否允许缩放
              rotatable: true, // 是否允许旋转
              scalable: true,  // 是否允许变焦
          },
        }
      }
    };
  },
  mounted() {
    //#region 图片预览
    initViewer() {       
      //设置数据
      this.options.viewer.images=[];
      //实例化对象
      this.$nextTick(() => {
        const images = this.$refs.imageList.querySelectorAll('img'); // 假设你的图片列表有一个 ref 为 "imageList"  
        if (images.length > 0) {  
          this.viewerInstance = new Viewer(images, {  
            // 配置项，根据你的需求调整  
            url: 'data-original', // 假设你的图片使用了 data-original 属性存储原图地址  
            navbar: true, // 显示导航栏  
            toolbar: true, // 显示工具栏  
            // ... 其他配置项  
          });  
        }  
      })
    },  
    //#endregion 图片预览
  },
};
</script>

文件预览

https://github.com/501351981/vue-office

https://501351981.github.io/vue-office/examples/dist/#/pdf

https://github.com/501351981/vue-office.git

docx文档预览组件

npm install @vue-office/docx vue-demi@0.14.6

excel文档预览组件

npm install @vue-office/excel vue-demi@0.14.6

pdf文档预览组件

npm install @vue-office/pdf vue-demi@0.14.6

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

vue-slide-editor

vue-slide-editor: 这是一个基于Vue的PPT编辑器插件，它提供了丰富的功能，包括幻灯片编辑、布局设置、文本编辑等。我们可以使用它来创建、编辑和预览PPT。
vue-ppt-player: 这是一个用于PPT播放的Vue组件，可以将PPT文档转换为幻灯片展示，并提供了一些播放控制选项，如自动播放、暂停、上一页、下一页等。
vue-pdf: 如果PPT以PDF格式存在，我们可以使用这个插件来在Vue中预览和展示PDF文档。它提供了一些交互式功能，如缩放、翻页等。
vue-draggable-resizable: 这个插件可以用于实现拖拽和调整大小的功能，如果需要在编辑PPT时调整幻灯片的位置和大小，这个插件非常有用。
vue-quill-editor：如果需要在PPT中添加富文本编辑功能，我们可以考虑使用这个插件。它提供了一个易于使用的富文本编辑器，可以帮助您编辑和格式化文本内容。

xgplayer 视频播放

https://v2.h5player.bytedance.com/

https://unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js

https://blog.csdn.net/qq_43886365/article/details/126351295

https://github.com/bytedance/xgplayer

npm install xgplayer


<div id="vs"></div>

import Player from 'xgplayer';

const player = new Player({
    id: 'vs',
    url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
})