Save && Print manual

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

iframe 预览+print

 <iframe style="width: 100%; height:100vh;" :src="pdfSrc.toString()"></iframe>

embed 预览+print

<embed width="800" height="600" src="test_pdf.pdf"> </embed> 

<embed v-show="pdfShow" width="800" height="600" src="cant.pdf"> </embed>

object 预览+print

<object classid="clsid:CA8A9780-" width="100%" height="100%" border="0">
<!--IE--> 
      <param name="_Version" value="65539"> 
      <param name="_ExtentX" value="20108"> 
      <param name="_ExtentY" value="10866"> 
      <param name="_StockProps" value="0"> 
      <param name="SRC" value="testing_pdf.pdf"> 
      
<embed src="testing_pdf.pdf" width="100%" height="800" href="testing_pdf.pdf">
</embed>
<!--FF--> 
</object> 

PDFViewer

基于pdfjs-lib，参考

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

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

vueshowpdf

支持JS，有机会再补充。

window 的document print

    const win = window.open()
    win?.document.write(
      '<img src="http://127.0.0.1:8888/res/a4cf3409335ec8d7f93b74503ed71ce6.png">'
    )
    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('<img src="' + canvas.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
  }