angular - 使用exceljs将图片设置为Excel
问题描述
我正在尝试设置我在后端拥有的图片我的意思是图像在backend.com/images/picture.jpg
我的问题中是如何将该图像设置在前面并导出到我的 excel 文件中?我尝试将图像转换为 Base64 格式的 URL 图像但不起作用我正在尝试使用此示例在 Angular 中将图像 url 转换为 base64
我的实际代码是
convertBlobToBase64(blob: Blob) {
return Observable.create(observer => {
const reader = new FileReader();
const binaryString = reader.readAsDataURL(blob);
reader.onload = (event: any) => {
this.file_piece_correct = event.target.result
observer.next(event.target.result);
observer.complete();
};
reader.onerror = (event: any) => {
console.log("File could not be read: " + event.target.error.code);
observer.next(event.target.error.code);
observer.complete();
};
});
}
generateExcel(dataExcel) {
this.http.get('http://127.0.0.1:8000' + dataExcel.file_piece_correct, { responseType: 'blob' })
.pipe(
switchMap(blob => this.convertBlobToBase64(blob))
)
.subscribe(base64ImageUrl => console.log(base64ImageUrl));
let dataEpp = JSON.parse(dataExcel.epp)
const title = 'Instruccion de trabajo';
// Create workbook and worksheet
const workbook = new Workbook();
const worksheet = workbook.addWorksheet('Instruccion de trabajo');
const imageId2 = workbook.addImage({
base64: this.file_piece_correct,
extension: 'jpeg',
});
worksheet.addImage(imageId2, 'B13:D13');
worksheet.getColumn(3).width = 30;
worksheet.getColumn(4).width = 30;
worksheet.addRow([]);
// Footer Row
const footerRow = worksheet.addRow(['This is system generated excel sheet.']);
footerRow.getCell(1).fill = {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: 'FFCCFFE5' }
};
footerRow.getCell(1).border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
// Merge Cells
worksheet.mergeCells(`A${footerRow.number}:F${footerRow.number}`);
// Generate Excel File with given name
workbook.xlsx.writeBuffer().then((datafirstHeader: any) => {
const blob = new Blob([datafirstHeader], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
fs.saveAs(blob, 'SocialShare.xlsx');
});
}
当我点击底部开始导出时,我会报错 你可以在这里查看
但基本上说core.js:6140 ERROR Error: Uncaught (in promise): Error: Unsupported media Error: Unsupported media
希望可以有人帮帮我
解决方案
推荐阅读
- java - Unity 项目运行良好,但现在尝试构建时给出“CommandInvokationFailure:无法更新 Android SDK 包列表”
- flutter - 错误:“Android Gradle 插件仅支持 Kotlin Gradle 插件版本 1.3.10 及更高版本。”
- excel - 将文件另存为 xlsm 或某种启用宏的格式
- java - java流groupBy收集器用于空键并在分组值列表上应用收集器
- javascript - 确保 useState() 钩子已被 useEffect 钩子更新?
- reactjs - 如何在本机反应中获取平面列表中的行索引
- python - matplotlib 小部件在 Jupyterlab 2.1.2 中不起作用
- reactjs - 使用 https 部署 React 时出现 404 错误,但适用于 http(使用 GoDaddy)
- css - 如何覆盖 React 本机 web 预定义的 css
- javascript - 单击按钮后如何更改 HTML 选择的默认值?