vue3 vue-print-nb 打印表单中嵌入图片

Vue3 中，`vue-print-nb` 是一个用于生成 PDF 或 HTML 的打印工具，它可以帮助你将 Vue 组件包括图片在内的内容适配到打印页面上。要在 Vue3 的表单中使用这个库并打印嵌入的图片，你可以按照以下步骤操作：

1. 首先，安装 `vue-print-nb` 和依赖项，例如 Axios (如果需要从服务器获取图片)：

   npm install vue-print-nb axios

2. 引入必要的模块到组件中：

   import { createPrintDocument } from 'vue-print-nb';
   import axios from 'axios';

3. 在模板中构建包含图片的表单元素，并确保图片有一个唯一标识符（如 `src` 属性）：

   <template>
     <div>
       <form @submit.prevent="print">
         <!-- 嵌入图片示例 -->
         <img :src="getImageSrc('imageId')" alt="图片描述" />
         <!-- 其他表单控件... -->
       </form>
     </div>
   </template>

4. 定义 `getImageSrc` 函数来获取图片，如果是本地图片就直接返回，如果是网络图片则通过 Axios 获取：

   methods: {
     getImageSrc(imageId) {
       if (process.env.NODE_ENV !== 'production') {
         // 在开发环境下显示本地图片路径
         return require('@/assets/images/' + imageId);
       } else {
         return axios.get(`https://example.com/api/image/${imageId}`).then(response => response.data.url);
       }
     },
     print() {
       const document = createPrintDocument({
         // 添加你想打印的内容，这里就是 form
         content: this.$refs.form,
         // 可能需要设置其他打印选项，比如页边距、方向等
         options: {
           pageSize: 'A4',
           landscape: false,
         },
       });
       document.print();
     },
   }

5. 当用户点击打印按钮时，会触发 `print` 方法，创建一个包含表单和图片的打印文档。