js实现html转pdf解决虚线变成实线,在jsPDF中创建虚线或虚线

2 个答案:

答案 0 :(得分：8)

我遇到了同样的问题，并且这样做了：

/**

* Draws a dotted line on a jsPDF doc between two points.

* Note that the segment length is adjusted a little so

* that we end the line with a drawn segment and don't

* overflow.

*/

function dottedLine(doc, xFrom, yFrom, xTo, yTo, segmentLength)

{

// Calculate line length (c)

var a = Math.abs(xTo - xFrom);

var b = Math.abs(yTo - yFrom);

var c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));

// Make sure we have an odd number of line segments (drawn or blank)

// to fit it nicely

var fractions = c / segmentLength;

var adjustedSegmentLength = (Math.floor(fractions) % 2 === 0) ? (c / Math.ceil(fractions)) : (c / Math.floor(fractions));

// Calculate x, y deltas per segment

var deltaX = adjustedSegmentLength * (a / c);

var deltaY = adjustedSegmentLength * (b / c);

var curX = xFrom, curY = yFrom;

while (curX <= xTo && curY <= yTo)

{

doc.line(curX, curY, curX + deltaX, curY + deltaY);

curX += 2*deltaX;

curY += 2*deltaY;

}

}

答案 1 :(得分：1)

jsPDF的更高版本具有内置功能：

setLineDash [Docs]

例如，以下示例绘制一条虚线，该虚线表示绘制的10mm的线，然后沿着从左到右的方向重复10mm的空间。我假设您正在绘制具有所有默认设置(即A4，毫米单位等)的页面：

doc.setLineDash([10, 10], 0);

doc.line(20, 25, 60, 25);

下面将绘制7mm的线，3mm的空间，1mm的线，3mm的空间，然后重复，但是，它将在10mm处开始图案，因此要绘制的虚线的第一部分是1mm的部分：

doc.setLineDash([7, 3, 1, 3], 10);

doc.line(20, 25, 60, 25);