上下标打印pdf的时候出现错位

收藏

我使用 HTMLCellType 实现上下标，在打印pdf 的时候出现上下标错位的现象。 image.png72872008.png

添加了一个上标按钮，一个下标 按钮。
 case "supcornermark"://elnxc-a 上下角标因为想做成复选的样子，名字需和checkbox里面的id一样
 cornermark("sup");
 break;
 case "subcornermark"://elnxc-a 上下角标因为想做成复选的样子，名字需和checkbox里面的id一样
 cornermark("sub");
 break;

按钮方法是：
var spreadNS = GC.Spread.Sheets;
function cornermark(cornermark) {
var cornermarkstart = "<" + cornermark + ">";
var cornermarkend = "</" + cornermark + ">";
var userSelection;
if (window.getSelection) {//一般浏览器
userSelection = window.getSelection();}
else if (document.selection) {//IE浏览器、Opera
userSelection = document.selection.createRange();}
var userSelectionx=userSelection.toString();
// 整个文本
var text = userSelection.anchorNode.data;
// 起点
var anchor = userSelection.anchorOffset;
// 终点
var focus = userSelection.extentOffset;
var length = text.length;
if(anchor > focus){
anchor += focus;
focus = anchor -focus;
anchor -=focus;
}
if(anchor == focus || length == (focus - anchor)){
alert("请选择部分内容！");
return;
}
//alert(text.substring(0,anchor));
var s1 = text.substring(0,anchor);
//alert(text.substring(anchor,focus));
var s2 = text.substring(anchor,focus);
//alert(text.substring(focus,length));
var s3 = text.substring(focus,length);
var ss = s1 + cornermarkstart + s2 + cornermarkend +s3;

var spread = designer.wrapper.spread;
var activeSheet = spread.getActiveSheet();
var rowindex = activeSheet.getActiveRowIndex();
 var columnindex = activeSheet.getActiveColumnIndex();
activeSheet.suspendPaint();
activeSheet.setValue(rowindex,columnindex,ss);
activeSheet.resumePaint();
activeSheet.suspendPaint();
var cell = activeSheet.getCell(rowindex,columnindex);
cell.cellType(new HTMLCellType());//指定是上下标单元格
activeSheet.resumePaint();
setPrintInfo(spread);
}

//elnxc-a 上下标start HTMLCellType
function HTMLCellType() {
this.typeName = "HTMLCellType";
this.allowOverflow = false;
}
HTMLCellType.prototype = new spreadNS.CellTypes.Text();
HTMLCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
if(value == '' || value == null || value === undefined) {
return;
}

// 判断是不是有居中等格式
var xcstyle = style;
// 是否左右居中 0靠左 1居中 2靠右
var hAlign = style.hAlign;
// 是否上下居中 0靠上 1居中 2靠下
var vAlign = style.vAlign;

var thisrow = context.row;
var thiscol = context.col;
var spread = designer.wrapper.spread;
var activeSheet = spread.getActiveSheet();
var thiscell = activeSheet.getCell(thisrow,thiscol);
var thisfont = thiscell.font();
var thiscolor = thiscell.foreColor();

var newObj = value.toString();
var showObj = value.toString()

var lll=0;

// 绘制上下标显示
ctx.save();
ctx.rect(x, y, w, h);//表示具有特殊位置的矩形，以及其在二维空间中的宽度和高度。
ctx.clip();
ctx.font = style.font;

//计算整个展示效果占据的宽度
var showwidth = 0;
//计算整个展示效果占据的高度
var showhigh = 0;
var sfont = thisfont.toString();
var pxindex = sfont.indexOf("px");
sfont = sfont.substring(0,pxindex);
if(sfont.indexOf(" ")!=-1){
var arr = sfont.split(" ");
sfont = arr[arr.length-1];
}
sfont = Number(sfont);
showhigh = sfont>18 ? sfont: 18;
while(showObj.indexOf("")!=-1 || showObj.indexOf("")!=-1){
var supindex = showObj.indexOf("");
var subindex = showObj.indexOf("");
if(subindex==-1 || (supindex!=-1&&supindex<subindex)){//上标在前
var sb = showObj.substring(0,supindex);
var end = showObj.indexOf("");
var sup = showObj.substring(supindex+5,end);
var se = showObj.substring(end+6,showObj.length);
if(sb!=""){
ctx.font = thisfont;
ctx.fillStyle = thiscolor;
showwidth += ctx.measureText(sb).width;
//ctx.textBaseline = "middle";
//ctx.fillText(sb, showwidth, y+13);
}
ctx.font = "8pt simkai";
//ctx.textBaseline = "alphabetic";
//ctx.fillText(sup, showwidth+ctx.measureText(sup).width, y+13);
showObj = se;
if(ctx.measureText(sup).width>lll)
lll = ctx.measureText(sup).width;
}else{//下标在前
var sb = showObj.substring(0,subindex);
var end = showObj.indexOf("");
var sub = showObj.substring(subindex+5,end);
var se = showObj.substring(end+6,showObj.length);
if(sb!=""){
ctx.font = thisfont;
ctx.fillStyle = thiscolor;
showwidth += ctx.measureText(sb).width;
//ctx.textBaseline = "middle";
//ctx.fillText(sb, showwidth, y+13);
}
ctx.font = "8pt simkai";
//ctx.textBaseline = "top";
//ctx.fillText(sub, showwidth+ctx.measureText(sub).width, y+13);
showObj = se;
if(ctx.measureText(sub).width>lll)
lll = ctx.measureText(sub).width;
}
//判断一个上标/下标后面是不是接着正文
if(showObj.indexOf("")!=0 && showObj.indexOf("")!=0){
showwidth += lll;
lll = 0;
}
//判断后面是否没有了角标---没有的话--需要自己把它做成正文
if(!(showObj.indexOf("")!=-1 || showObj.indexOf("")!=-1)){
var sb = showObj;
if(sb!=""){
ctx.font = thisfont;
ctx.fillStyle = thiscolor;
//ctx.textBaseline = "middle";
//ctx.fillText(sb, showwidth+ctx.measureText(sb).width, y+13);
showwidth +=ctx.measureText(sb).width;
}
}
}

//设置全局参数
var sblength = x+2;
var sbhight = y+13;
var ll = 0;

if(hAlign!=undefined&&hAlign==1){
sblength += (w-showwidth)/2;
}else if(hAlign!=undefined&&hAlign==2){
sblength += (w-showwidth-2-2);
}

if(vAlign!=undefined&&vAlign==1){
sbhight += (h-showhigh)/2;
}else if(vAlign!=undefined&&vAlign==2){
sbhight += (h-showhigh);
}

if(newObj.indexOf("")!=-1 || newObj.indexOf("")!=-1){}else{
thiscell.cellType(undefined);
}
while(newObj.indexOf("")!=-1 || newObj.indexOf("")!=-1){
var supindex = newObj.indexOf("");
var subindex = newObj.indexOf("");
if(subindex==-1 || (supindex!=-1&&supindex<subindex)){//上标在前
var sb = newObj.substring(0,supindex);
var end = newObj.indexOf("");
var sup = newObj.substring(supindex+5,end);
var se = newObj.substring(end+6,newObj.length);
if(sb!=""){
ctx.font = thisfont;
ctx.fillStyle = thiscolor;
sblength += ctx.measureText(sb).width;
ctx.textBaseline = "middle";
ctx.fillText(sb, sblength, sbhight);
}
ctx.font = "8pt simkai";
ctx.textBaseline = "alphabetic";
ctx.fillText(sup, sblength+ctx.measureText(sup).width, sbhight);
newObj = se;
if(ctx.measureText(sup).width>ll)
ll = ctx.measureText(sup).width;
}else{//下标在前
var sb = newObj.substring(0,subindex);
var end = newObj.indexOf("");
var sub = newObj.substring(subindex+5,end);
var se = newObj.substring(end+6,newObj.length);
if(sb!=""){
ctx.font = thisfont;
ctx.fillStyle = thiscolor;
sblength += ctx.measureText(sb).width;
ctx.textBaseline = "middle";
ctx.fillText(sb, sblength, sbhight);
}
ctx.font = "8pt simkai";
ctx.textBaseline = "top";
ctx.fillText(sub, sblength+ctx.measureText(sub).width, sbhight);
newObj = se;
if(ctx.measureText(sub).width>ll)
ll = ctx.measureText(sub).width;
}
//判断一个上标/下标后面是不是接着正文
if(newObj.indexOf("")!=0 && newObj.indexOf("")!=0){
sblength += ll;
ll = 0;
}
//判断后面是否没有了角标---没有的话--需要自己把它做成正文
if(!(newObj.indexOf("")!=-1 || newObj.indexOf("")!=-1)){
var sb = newObj;
if(sb!=""){
ctx.font = thisfont;
ctx.fillStyle = thiscolor;
ctx.textBaseline = "middle";
ctx.fillText(sb, sblength+ctx.measureText(sb).width, sbhight);
}
}
}
ctx.restore();
setPrintInfo(spread);
};

HTMLCellType.prototype.getEditorValue = function (editorContext) {
return $(editorContext).text().toString();
}
/*code_end*/

function setPrintInfo(spread) {var sheet = spread.getActiveSheet();
var printInfo = sheet.printInfo();
printInfo.showBorder(true);
printInfo.showGridLine(true);
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.centering(GC.Spread.Sheets.Print.PrintCentering.horizontal);}
//elnxc-a 上下标end

wangqgsunway · wangqgsunway

格式会影响上下标打印打印

Clark.Pan · Clark.Pan

这个可能得具体详细分析一下了，您能否提供一个重现问题的demo，我需要调试一下才能知道问题出在哪

wangqgsunway · wangqgsunway

附上问题json文件

Clark.Pan · Clark.Pan

本帖最后由 ClarkPan 于 2018-5-31 17:21 编辑

收到，正在处理中，另外，我将您上传demo的帖子删除了，以后在线表格编辑器的demo您还是通过邮件进行发送（包含源码）

Clark.Pan · Clark.Pan

本帖最后由 ClarkPan 于 2018-5-31 17:37 编辑

您确认一下导出PDF的字体与显示时的字体是否一致，不一样的字体，字宽，高也不一样。您需要确保导出的字体与显示的字体一致，如果确认不了，您可以将您导出PDF使用的字库（相应TTF文件）发给我们。

wangqgsunway · wangqgsunway

导出的时候这个怎么设置

Clark.Pan · Clark.Pan

也就是 simkai这个字体的字库发给我们，您现在相当于单元格中上标用的是这个字体，而单元格本身又设置的是宋体。这样的方式不是我们所支持的方式

wangqgsunway · wangqgsunway

我在demo中是这么写的，但是在我们系统中我们使用的都是宋体，也有这个问题。

Clark.Pan · Clark.Pan

我需要详细的调研一下问题，初步断定是跟自定义单元格的居中显示有关系，有结果了再给您回复。

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

[已处理] 上下标打印pdf的时候出现错位

13 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄