Jspdfエクスポート保存

npm installjspdfを解決する方法--saveerror



How Solve Npm Install Jspdf Save Error



今日、テキスト、チャート、および表を含むdivモジュールをダウンロード用のPDFファイルに変換する必要があります。自分でそれを実現する考えはありません。
そこで、他のボスから学んだ教訓を確認しました。
要約すると、基本的には、キャンバスを使用してページモジュールを画像に描画し、PDFファイルに変換します。
私自身の実装中に小さな落とし穴に遭遇しました。ここにプロセス全体を記録します。

最初のステップ：html2canvasとjspdfの依存関係をインストールします

npm install html2canvas --save

上記の手順は、キャンバス描画ツールの依存関係をインストールしてから、最初のピットをインストールすることです。
jsPDFの依存関係をインストールするために、私のように次のコマンドを何度も試したことがないかどうかはわかりません
npm install jspdf --save
cnpm install jspdf --save
npmでもcnpmでも、結果は次のようになります。



npm ERR! path git npm ERR! code ENOENT npm ERR! errno ENOENT npm ERR! syscall spawn git npm ERR! enoent Error while executing: npm ERR! enoent undefined ls-remote -h -t ssh://root@xxxxx.com/eligrey/FileSaver.js.git npm ERR! enoent npm ERR! enoent npm ERR! enoent spawn git ENOENT npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! E:Program Files odejs ode_cache\_logs2019-11-22T07_39_30_903Z-debug.log

上記は、リソースが最初にダウンロードされたときに対応するファイルが見つからないことを意味します。
依存関係を導入するために、jspdf--saveWayのインストールを断固として放棄します
言うまでもありませんが、cdnメソッドは次のようにjspdfを導入します

<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js'>script>

ステップ2ページをPDFとして保存するグローバル機能をカプセル化します

1. jsファイルを作成するだけで、コードは次のようになります[注：cpbgはページ内のdivのIDです]



// Export page to PDF format import html2Canvas from 'html2canvas' //import JsPDF from 'jspdf' export default{ install (Vue, options) { Vue.prototype.getPdf = function () { var title = 'High-tech Enterprise Recognition Evaluation Report' html2Canvas(document.querySelector('#cpbg'), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } PDF.save(title + '.pdf') } ) } } }

2.上記のJSファイルをmain.jsに導入します

import htmlToPdf from './components/heightTest/htmlToPdf'//Page to PDF Vue.use(htmlToPdf)

ステップ3：使用するコンポーネントでgetPdf（）を呼び出す

<el-button @click='getPdf()'>Save as PDFel-button>

大丈夫だと思ったけど現実は残酷
画像
作成したgetPdf（）関数でJsPDFメソッドが見つかりません
正確でエレガントなので、以下のリンクを開いてソースコードを表示します

<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js'>script>

私は何かを見つけました、JsPDFのJは小文字であることがわかりました、私は行きました。何もありません。誰が私たちにコピーするだけだと言ったのか
画像
小文字に変更された後、今日のクロールは終了しました
最後に、レンダリング：



元のページの画像

画像

ダウンロードしたPDF画像を保存します

画像