|
|
@@ -1,77 +1,56 @@
|
|
|
import html2canvas from 'html2canvas';
|
|
|
import jsPDF from 'jspdf';
|
|
|
|
|
|
-const ratio = 2.5; //放大 兼容低分辨率屏幕清晰度
|
|
|
-let pdf = null;
|
|
|
-export const downloadPDF = (page, direction) => {
|
|
|
+const ratio = 1; //放大 兼容低分辨率屏幕清晰度
|
|
|
+
|
|
|
+const margin = 10; //边距
|
|
|
+// A4宽高
|
|
|
+const a4Width = 595.28;
|
|
|
+const a4Height = 841.89;
|
|
|
+// let pdf = null;
|
|
|
+export const downloadPDF = (page, fileName = '工单') => {
|
|
|
// direction : 方向
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- let canvasList = [];
|
|
|
- async function fn () {
|
|
|
- await html2canvas(page, { scale: ratio }).then(function (canvas) {
|
|
|
- canvasList.push(canvas);
|
|
|
- });
|
|
|
- canvasList.forEach((n) => {
|
|
|
- canvas2PDF(n, direction);
|
|
|
- });
|
|
|
- pdf.save('条码.pdf');
|
|
|
+ html2canvas(page, { scale: ratio }).then(function (canvas) {
|
|
|
+ var contentWidth = canvas.width;
|
|
|
+ var contentHeight = canvas.height;
|
|
|
+
|
|
|
+ //一页pdf显示html页面生成的canvas高度;
|
|
|
+ var pageHeight = (contentWidth / a4Width) * a4Height;
|
|
|
+ //未生成pdf的html页面高度
|
|
|
+ var leftHeight = contentHeight;
|
|
|
+ //页面偏移
|
|
|
+ var position = 10;
|
|
|
+ //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
|
|
|
+ var imgWidth = a4Width - margin * 2;
|
|
|
+ var imgHeight = (imgWidth / contentWidth) * contentHeight;
|
|
|
+
|
|
|
+ var pageData = canvas.toDataURL('image/jpeg', 1.0);
|
|
|
+
|
|
|
+ var pdf = new jsPDF('', 'pt', 'a4');
|
|
|
+
|
|
|
+ //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
|
|
|
+ //当内容未超过pdf一页显示的范围，无需分页
|
|
|
+ if (leftHeight < pageHeight) {
|
|
|
+ pdf.addImage(pageData, 'JPEG', margin, position, imgWidth, imgHeight);
|
|
|
+ } else {
|
|
|
+ while (leftHeight > 0) {
|
|
|
+ pdf.addImage(pageData, 'JPEG', margin, position, imgWidth, imgHeight);
|
|
|
+ leftHeight -= pageHeight;
|
|
|
+ position -= a4Height;
|
|
|
+ //避免添加空白页
|
|
|
+ if (leftHeight > 0) {
|
|
|
+ pdf.addPage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ pdf.save(`${fileName}.pdf`);
|
|
|
const blob = pdf.output('blob');
|
|
|
var blob_url = URL.createObjectURL(blob);
|
|
|
window.open(blob_url);
|
|
|
pdf = null;
|
|
|
resolve();
|
|
|
- }
|
|
|
- fn();
|
|
|
+ });
|
|
|
});
|
|
|
};
|
|
|
-
|
|
|
-const canvas2PDF = (canvas, direction = 'l') => {
|
|
|
- // direction : 方向
|
|
|
- let contentWidth = canvas.width;
|
|
|
- let contentHeight = canvas.height;
|
|
|
- let imgWidth = prasePxToCm(contentWidth);
|
|
|
- let imgHeight = prasePxToCm(contentHeight);
|
|
|
- // 第一个参数： l：横向 p：纵向
|
|
|
- // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
|
|
|
- if (!pdf) {
|
|
|
- pdf = new jsPDF(direction, 'cm', [imgWidth, imgHeight]);
|
|
|
- pdf.addImage(
|
|
|
- canvas.toDataURL('image/jpeg', 1.0),
|
|
|
- 'JPEG',
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- imgWidth,
|
|
|
- imgHeight
|
|
|
- );
|
|
|
- } else {
|
|
|
- pdf.addPage();
|
|
|
- pdf.addImage(
|
|
|
- canvas.toDataURL('image/jpeg', 1.0),
|
|
|
- 'JPEG',
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- imgWidth,
|
|
|
- imgHeight
|
|
|
- );
|
|
|
- }
|
|
|
-};
|
|
|
-function prasePxToCm (px) {
|
|
|
- var targetEleWidth = 1,
|
|
|
- cm;
|
|
|
- var createEle = document.createElement('input');
|
|
|
- var body = document.getElementsByTagName('body');
|
|
|
- createEle.setAttribute(
|
|
|
- 'style',
|
|
|
- 'width:1cm !important;height:1cm !important;border-width:0px !important;padding:0px !important;margin:10px !important;'
|
|
|
- );
|
|
|
- createEle.id = 'elementId_' + new Date().getTime();
|
|
|
- createEle.type = 'hidden';
|
|
|
- body[0].appendChild(createEle);
|
|
|
- var targetEle = document.getElementById(createEle.id);
|
|
|
- targetEleWidth = window
|
|
|
- .getComputedStyle(targetEle)
|
|
|
- .width.match(/^\d+\.?\d*/)[0];
|
|
|
- cm = px / targetEleWidth / ratio;
|
|
|
- targetEle.parentNode.removeChild(targetEle);
|
|
|
- return cm.toFixed(3);
|
|
|
-}
|
quwangxin