vue导出word以页面视图打开

要实现将Vue页面导出为Word并以页面视图形式打开，可以按照以下步骤进行操作：

1. 安装依赖：使用Vue CLI命令行工具创建一个新的项目，并在该项目中安装依赖。可以使用 `npm install` 命令安装 `docxtemplater` 和 `file-saver` 库。

2. 创建Word模板：创建一个Word文档，包含你想要在页面视图中显示的内容。可以使用Microsoft Word或其他文本编辑器来创建模板。在模板中，使用双大括号（{{}}）将要动态填充的内容进行标记。

3. 创建Vue组件：在Vue项目中创建一个导出Word的组件。在该组件中导入 `docxtemplater` 和 `file-saver` 库，并在`mounted`生命周期钩子函数中加载并解析Word模板文件。

4. 填充内容：在`mounted`生命周期钩子函数中，使用`docxtemplater`库的`loadFile`方法加载Word模板文件。然后，将要动态填充的数据传递给`docxtemplater`的`setData`方法，以便在模板中进行替换。可以使用Vue的数据属性或通过API请求获取数据。

5. 导出Word：使用`docxtemplater`的`render`方法将填充了数据的模板导出为Word文档。然后，使用`file-saver`库的`saveAs`方法将导出的文档保存为Word文件。

6. 在页面视图中打开：使用创建的Word文件路径，在Vue组件中创建一个超链接或按钮，通过`target="_blank"`属性将其打开方式设置为新标签页。这样，当用户点击导出按钮时，系统会自动打开这个新的标签页，并以页面视图形式显示Word文档。

请注意，以上步骤仅提供了一种基本的实现思路，实际操作中可能需要根据具体的项目需求进行适当的调整和修改。