const { jsPDF } = window.jspdf
export default function (id, htmlTitle = '标题') {
let element = document.body;
if (id) {
element = document.getElementById(id);
}
return html2canvas(element, {
logging: false,
useCORS: true,
}).then(function (canvas) {
var pdf = new jsPDF('p', 'mm', 'a4');
var ctx = canvas.getContext('2d');
var a4w = 190;
var a4h = 257;
var imgHeight = Math.floor((a4h * canvas.width) / a4w);
var renderedHeight = 0;
while (renderedHeight < canvas.height) {
var page = document.createElement('canvas');
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight);
page
.getContext('2d')
.putImageData(
ctx.getImageData(
0,
renderedHeight,
canvas.width,
Math.min(imgHeight, canvas.height - renderedHeight),
),
0,
0,
);
pdf.addImage(
page.toDataURL('image/jpeg', 1.0),
'JPEG',
10,
10,
a4w,
Math.min(a4h, (a4w * page.height) / page.width),
);
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) {
pdf.addPage();
}
}
var pdfBase64Str = pdf.output('datauristring');
var myfile = dataURLtoFile(pdfBase64Str, htmlTitle + '.pdf');
return myfile;
});
}
const dataURLtoFile = (dataurl, filename) => {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
};
import React, { useState, useEffect, useRef } from 'react';
import { Space, Button, Modal, Spin } from 'antd';
import { httpAdminTyreHandoverPhotoDetail } from '@/api'
import html2pdf from '@/utils/html2pdf';
import JSZip from 'jszip'
import { saveAs } from "file-saver";
import './style.less'
import ReactToPrint from 'react-to-print';
import { mmToPixels } from "@/utils/tools";
const Index = ({ selectedIds, setShow }) => {
const [data, setData] = useState({})
const ref = useRef();
const [pageLoading, set_pageLoading] = useState(false)
useEffect(async () => {
try{
set_pageLoading(true)
const list = await Promise.all(
selectedIds.map(async id => {
const res = await httpAdminTyreHandoverPhotoDetail({ id });
return res.data;
})
)
setData(list)
set_pageLoading(false)
} catch(e) {
console.error(e)
}
}, [selectedIds])
const [loading, setLoading] = useState(false)
const butns = [
<Button
disabled={pageLoading}
loading={loading}
type="primary"
onClick={async () => {
setLoading(true)
var zip = new JSZip();
await Promise.all(
data.map(async (item, index) => {
const pdfFile = await html2pdf(`batch-export-box${index}`);
zip.file(`文件:${item?.order_num}.pdf`, pdfFile);
})
)
zip.generateAsync({ type: "blob" })
.then(function (content) {
saveAs(content, "文件.zip");
});
setLoading(false)
}}
>
导出PDF文件
</Button>,
<ReactToPrint
trigger={() => <Button type="primary" disabled={pageLoading}>打印</Button>}
content={() => ref.current}
/>,
]
const widthPixels = mmToPixels(210);
const heightPixels = mmToPixels(297);
return (
<Modal
open={true}
width='1200px'
onCancel={() => setShow(false)}
footer={
[
...butns,
<Button onClick={() => setShow(false)}>取消</Button>
]
}
title={<Space>
<span>批量打印</span>
{butns[0]}
{butns[1]}
</Space>}
>
<Spin spinning={pageLoading}>
<div ref={(e) => ref.current = e}>
<div style={{ width: '100%' }}>
{
data?.length ? data.map((item, index) => {
return <div
id={`batch-export-box${index}`}
style={{ padding: '12px', pageBreakAfter: 'always', width:`${widthPixels}px` }}
>
<Content info={item} />
</div>
}) : ''
}
</div>
</div>
</Spin>
</Modal>
)
}
export default Index;
const Content = ({info}) => {
return <div className='PDFDescriptions' style={{width: '100%'}} direction="vertical">
内容
</div>
}