vue 使用viewer.js

你可以使用Viewer.js来在Vue项目中实现文件预览。首先，你需要在Vue项目中安装Viewer.js。

你可以使用npm或者yarn来进行安装。打开终端并进入你的Vue项目目录，然后执行以下命令：

npm install viewerjs

或者

yarn add viewerjs

安装完成后，在你的Vue组件中引入Viewer.js。你可以在需要预览文件的地方引入它，比如在一个按钮点击事件中。

import Viewer from 'viewerjs';

export default {
  methods: {
    openFilePreview() {
      const viewer = new Viewer(document.getElementById('your-file-element'));
      viewer.show();
    }
  }
}

上面的代码中，`your-file-element`是你要预览文件的DOM元素的id。你需要将其替换为实际的元素id。

然后，在你的模板中添加一个按钮，绑定到`openFilePreview`方法。

<template>
  <div>
    <button @click="openFilePreview">预览文件</button>
    <div id="your-file-element">
      <!-- 这里是你要预览的文件内容 -->
    </div>
  </div>
</template>

这样，当你点击"预览文件"按钮时，会弹出一个模态框来显示预览文件的内容。

请注意，Viewer.js支持多种文件类型的预览，包括图片、PDF和视频等。你可以根据你的需求调整代码来预览不同类型的文件。

希望这可以帮助到你！如果你有任何其他问题，请随时提问。