< div v-for = " item in currentData.codeList"
:key = " item.recipeCode" >
< recipeDetail :ref = " ' recipeDetail-'+item.recipeCode"
:recipe-code = " item.recipeCode"
class = " recipe-detail"
@batchPrintNum = " batchPrintNum" />
< div style = " page-break-after : always; " />
</ div>
import html2Canvas from 'html2canvas'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import JsPDF from 'jspdf'
async getPoster ( ) {
try {
await this . $nextTick ( )
const doms = document. querySelectorAll ( '.detail' )
const zip = new JSZip ( )
for ( let i = 0 ; i < doms. length; i++ ) {
const dom = doms[ i]
dom. style. background = '#FFFFFF'
const canvas = await html2Canvas ( dom, {
scale : 4 ,
allowTaint : true ,
useCORS : true ,
timeout : 10000
} )
await this . $nextTick ( )
const canvasWidth = canvas. width
const canvasHeight = canvas. height
const page = document. createElement ( 'canvas' )
const a4w = 184.6
const vM = 12.7
const hM = 15.9
page. width = canvasWidth
page. height = canvasHeight
const pdf = new JsPDF ( 'p' , 'mm' , 'a4' )
const ctx = canvas. getContext ( '2d' )
page. getContext ( '2d' ) . putImageData ( ctx. getImageData ( 0 , 0 , canvasWidth, canvasHeight) , 0 , 0 )
pdf. addImage ( page. toDataURL ( 'image/jpeg' , 1.0 ) , 'JPEG' , vM, hM, a4w, a4w * page. height / page. width)
await zip. file ( ` ${
this . currentData. codeList[ i] . name} - ${
i} .pdf ` , pdf. output ( 'blob' ) )
}
const content = await zip. generateAsync ( {
type : 'blob' } )
FileSaver. saveAs ( content, 'XXX.zip' )
this . loading. close ( )
this . isVisible = false
} catch ( error) {
this . isVisible = false
this . loading. close ( )
console. error ( error)
this . $message. warning ( '下载失败,请重试!' )
}
}