导出pdf字体问题【SJS-16778】

收藏

本帖最后由 Ellia.Duan 于 2023-3-7 14:29 编辑

版本：spredJS 15.2.0
问题：
1、根据提供的例子，使用自定义单元格的方式处理pdf文字显示问题，发现当一个单元格中有多行文字时，转图片会将所有文字转成一行
image.png917127380.png

请问有什么方法保持原格式吗？ssjson文件见附件

import GC from '@grapecity/spread-sheets';
import _vue from '@/main';
function RenderHTMLTagCellType(items, size, isHorizontal) {
this.typeName = 'RenderHTMLTagCellType';
this.allowOverflow = false;
}
RenderHTMLTagCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
RenderHTMLTagCellType.prototype.paint = function(
ctx,
value,
x,
y,
w,
h,
style,
context
) {
// 自定义单元格什么都不用做，只需要隐藏value即可。
return GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [
ctx,
' ',
x,
y,
w,
h,
style,
context,
]);
};
export function _html2img(spread) {
try {
spread.suspendPaint();
let sheet = spread.getActiveSheet();
let sels = sheet.getSelections();
if (!sels || sels.length !== 1) throw new Error('选中区域不合法');
let range = sels[0];
for (let r = 0; r < range.rowCount; r++) {
let row = range.row + r;
for (let c = 0; c < range.colCount; c++) {
let col = range.col + c;
let span = sheet.getSpan(row, col);
if (span && span.row === row && span.col === col) {
if (sheet.getText(row, col) && sheet.getText(row, col) !== '') {
let range = new GC.Spread.Sheets.Range(
row,
col,
span.rowCount,
span.colCount
);
html2ImgByRange(sheet, range);
}
}
if (!span) {
let range = new GC.Spread.Sheets.Range(row, col, 1, 1);
html2ImgByRange(sheet, range);
}
}
}
spread.resumePaint();
} catch (error) {
_vue.$alertMessageBox('text2img发生异常!');
console.log(error);
}
}
function html2ImgByRange(sheet, range) {
try {
let value = sheet
.getRange(range.row, range.col, range.rowCount, range.colCount)
.toHtml();
let style = sheet.getActualStyle(range.row, range.col),
cell = sheet.getCell(range.row, range.col);
let svgPattern =
'<svg xmlns="http://www.w3.org/2000/svg" width="{0}" height="{1}">' +
'<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font:{2}">{3}</div></foreignObject></svg>';
let w = cell.sheet.getCellRect(cell.row, cell.col).width;
let h = cell.sheet.getCellRect(cell.row, cell.col).height;
let data = svgPattern
.replace('{0}', w)
.replace('{1}', h)
.replace('{2}', style.font)
.replace('{3}', value);
let doc = document.implementation.createHTMLDocument('');
doc.write(data);
// Get well-formed markup
data = new XMLSerializer().serializeToString(doc.body.children[0]);
let img = new Image();
img.src =
'data:image/svg+xml;base64,' +
window.btoa(unescape(encodeURIComponent(data))); // 涉及中文时的转码
cell.tag(img);
sheet.getCell(cell.row, cell.col).backgroundImage(img.src);
img.onload = (function(cell, value, img) {
return () => {
cell.cellType(new RenderHTMLTagCellType());
cell.value('');
cell.backgroundImageLayout(GC.Spread.Sheets.ImageLayout.center);
console.log(img.src);
cell.backgroundImage(img.src);
};
})(cell, value, img);
} catch (error) {
console.log(error);
}
}

复制代码

2、可不可以通过注册字体，直接解决上下标的问题？比如 arial unicode ms.ttf 字体，纯前端注册字体，发现导出pdf不支持改字体，字体见附件
image.png117405089.png

Clark.Pan · Clark.Pan

本帖最后由 Clark.Pan 于 2023-1-30 18:05 编辑

我这边看到，代码中提供了一些方法
这个方法我是了之后最终是给坐标13,28这个单元格添加了一个图片，如下图所示
image.png304721984.png

我不明白的是这个操作跟您前面描述的问题有什么关系，请详细的在描述一下。

CTI_ELN · CTI_ELN

Clark.Pan 发表于 2023-1-30 17:27
我这边看到，代码中提供了一些方法
这个方法我是了之后最终是给坐标13,28这个单元格添加了一个图片，如下 ...

转成图片主要是解决生成pdf的时候，上下标显示的问题，比如10的3次幂，他的幂在pdf上可能直接显示为□

Clark.Pan · Clark.Pan

但是你这个单元格设置背景图片是在13,28这个坐标，跟你所说的第10行并没有什么关系。

CTI_ELN · CTI_ELN

Clark.Pan 发表于 2023-1-31 18:01
但是你这个单元格设置背景图片是在13,28这个坐标，跟你所说的第10行并没有什么关系。

那是我说的有歧义吧，我这边给出的是代码片段，真正的调用是鼠标选中单元格，然后通过右键菜单调用 _html2img 方法，使用 sheet.getSelections() 获取选中的区域；再将区域转化为图片。

在转换为图片后，我发现单元格中如果是多行文字，转成图片后会变为一行，所以想知道有没有方法解决这个问题，令图片和原单元格文字排版一致

Clark.Pan · Clark.Pan

明白了，我这边已经重现问题了，我调研一下给您回复。

Clark.Pan · Clark.Pan

您好，
造成问题的原因是导出HTML的时候没有换行。该问题已经确认为产品bug，后续会进行修复（SJS-16778）本贴改为保留处理，并移至bug反馈板块

Clark.Pan · Clark.Pan

该问题预计V16.1.0版本进行修复，目前该版本还未发，目前预计4月底5月初会发布。请您关注一下新版本更新，等V16.1.0发布，您可以下载对应更新进行验证。

		自动登录	找回密码
密码			立即注册

[已处理] 导出pdf字体问题【SJS-16778】

7 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄