web项目导出word之用blob保存的图片

问题摘要:web项目中有个功能,需要将动态页面保存为word,该页面中含有图片,数据库使用blob格式保存

实现思路:使用ftl保存word模板,后台部分直接将所有数据处理好交给ftl即可。其中blob数据需要转换为base64,word方可正确显示

详细方法:1,准备好需要的word模板,将文字类变量用${}替换,图片部分保留不动,word文档另存为xml格式;

2,使用文本编辑器打开xml文件,这时候会看到xml文档中出现很长串的英文字符码,为图片base64编码,替换为${}保存,并将xml代码保存为ftl文件;

3,java后台代码处理数据,
BLOB image=获取的blob数据;
InputStream inStream = image.getBinaryStream(); 
long nLen = image.length();
if(nLen > 0){
int nSize = (int) nLen;
byte[] data = new byte[nSize];
inStream.read(data);
inStream.close();
BASE64Encoder encoder = new BASE64Encoder(); 
String rohto = encoder.encode(data); 
rohto为base64编码,作为参数传递给ftl展示即可

在Vue3中,头部导航栏(通常称为`Header`)是一个常见的组件,用于显示页面的顶部菜单或者控制面板。在Vuetify 3中,这是一个可复用的UI组件,你可以使用它的API轻松地创建和配置。以下是如何在Vuetify 3中创建和使用头部导航栏的基本步骤: 1. 安装Vuetify:首先确保已安装Vuetify 3,可以通过npm或yarn安装: ```bash npm install vuetify@next # 或者 yarn add vuetify@next ``` 2. 创建Vue项目并引入Vuetify: 在`main.js`或`setup.ts`中导入并初始化Vuetify: ```js import { createApp, Vuetify } from 'vuetify' import App from './App.vue' const app = createApp(App) app.use(Vuetify) ``` 3. 定义头部导航栏组件: 使用Vuetify的`v-app-header`、`v-navigation-drawer`(如果需要侧边栏)和`v-btn`等元素来构建导航栏。例如: ```html <template> <v-app> <v-app-header> <v-row class="py-0"> <!-- 你的导航链接 --> <v-col v-for="(item, index) in navigationLinks" :key="index"> <v-btn @click="goToPath(item.path)" :to="{ name: item.name }">{{ item.label }}</v-btn> </v-col> </v-row> </v-app-header> <v-content> <!-- 主要内容区域 --> </v-content> </v-app> </template> ``` 在这里,`navigationLinks`是一个数组,包含你的导航链接对象,包括路径(`path`)和标签(`label`)。 4. 配置路由(如果需要): 使用Vue Router来处理页面跳转,确保已经安装并配置了路由: ```js import { useRouter } from 'vue-router' export default { setup() { const router = useRouter() const goToPath = (path) => router.push(path) // 初始化导航链接 const navigationLinks = [ { path: '/dashboard', name: 'Dashboard', label: '仪表板' }, { path: '/settings', name: 'Settings', label: '设置' } ] return { navigationLinks, goToPath } } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值