Save && Print manual

在此记录各develop language的print method，以及遇到的问题。

iframe 预览+print

embed 预览+print

"800" height="600" src="test_pdf.pdf">  

"pdfShow" width="800" height="600" src="cant.pdf"> 

object 预览+print

PDFViewer

基于pdfjs-lib，参考

打印时，比例不协调
import PDFViewer from ‘pdf-viewer-vue’

    

      <PDFViewer 
      :source="pdfSrc.toString()" 
      style="height: 70vh;width:75vw;" 
      @download="handleDownload" 
      :settings="{defaultZoom:1000}"/>
    

vueshowpdf

支持JS，有机会再补充。

window 的document print

    const win = window.open()
    win?.document.write(
      ''
    )
    win?.print()
    win?.close()

window canvas print

參考

npm install html2canvas
import html2canvas from 'html2canvas';

需要進一步調試，目前沒有走通。

 const canvasPrint = async () => {
    elHelper.alertBox('ssd')
    await pdfjsLib
      .getDocument('http://127.0.0.1:8888/res/INV_SIN2300003699.pdf')
      .promise.then((pdf) => {
        pdf.getPage(1).then((page) => {
          const canvas = document.createElement('canvas')
          const context = canvas.getContext('2d')
          const viewPort = page.getViewport({ scale: 1 })

          canvas.height = viewPort.height
          canvas.width = viewPort.width

          page
            .render({
              canvasContext: context,
              viewPort: viewPort
            })
            .promise.then(() => {
              html2canvas(canvas).then((canvas) => {
                const printWindown = window.open('', 'Print')
                printWindown.document.write('toDataUrl() + '">')
                printWindown.print()
                printWindown.close()
              })
            })
        })
      })
  }

window 打印当前页

当然也包括pdf，不过基本上不能用于商业化，因为打印的区域需要设计，不专业。

  const winPrintPdf = () => {
    window.print()
  }

通过URL保存下载文件

npm install file-saver

  const savePdf = async () => {
    const pdfData = await loadPdfData('http://127.0.0.1:8888/res/INV_SIN2300003699.pdf')
    saveAs(pdfData, 'file.pdf')
  }
  const loadPdfData = async (pdfUrl: string) => {
    //load paf
    const pdf = await pdfjsLib.getDocument(pdfUrl).promise
    //get pdf data
    const pdfDataUrl = await pdf.getData().then((data) => {
      return URL.createObjectURL(new Blob([data], { type: 'application/pdf' }))
    })
    return pdfDataUrl
  }