プロジェクトの要件は、PDFレポート、あまり以前に使用キャンバス転送PDFレポートをエクスポートするが、時間が間違って行くとき、これに対処するための背景を変更します。ビューのポイントの名前、PDFにレンダリング使用WebKitのHTMLから、それは明らかwkhtmltopdf。自分自身の開発プロセスにおけるので、料理のレベルがピットを落下し続けている、今の小さなパートナーが同じ問題に遭遇役立つことを期待してまとめます。
1.記事をインストール
wkhtmltopdfは、強力な抜け穴のフルとして記述することができますが、ない彼の理由は、結局のところ、WebKitの外部のプログラムに依存する場合があります。私たちは、たとえばUbuntuのをインストールするには、楽観的なバージョンをダウンロードしますときに、コマンドラインがlsb_release -a
コードネーム見ることができます：バイオニック、debパッケージの指定されたバージョンをダウンロードする公式サイトwkhtmltopdf行くそれがリモートサーバーであれば、うまくサーバーに直接のwgetその後、sudo apt install <download file>パッケージをインストールします。ページをダウンロードし、それが読み取ります。
それでは、ダウンロードXVFBの規定に従わせsudoo apt install xvfb、その環境の準備ができ、私たちはXVFB環境で、最終的な目標wkhtmltopdfコマンドを実行します。
2.記事を使用してくださいBaiduの例を取得あなたはそう単純で良い文字の十分でない場合、xvfb-run wkhtmltopdf www.baidu.com baidu.pdfあなたは、Baiduのホーム・ページを開きます。現在のディレクトリハーベストPDF pdfファイルで生成されます。この時間すべてが所定の位置にあるが、私たちは、コンバージョンページに行ってきました何回も複雑なJavaScriptと複雑な動的なページは、変換する前に実行する必要があるwkhtmltopdf -Hのページのオプションであり、ビューの文書を--window-status <...>意味し、引数た場合にのみ、あなたのことJSプログラムが明示的にのみ、ページをレンダリングするだけで同じ時間wkhtmltopdfを重視よるwindow.status = <...>を呼び出し、これは＆黒wkhtmltopdfですうん。あなたは慎重に見ている場合も、あなたはそれがまた、文書のクッキーを読み書きサポートしていますので、特権の出会いのページは恐れていない必要があることがわかります。
3.コール章
、プログラムの導入にあまり依存して自分自身を与えていない、私たちの目的はgolangのwkhtmltopdfを呼び出すことです次に、対応するライブラリを持っていないが、事の完全なコマンドは、トラブルgithubの上のサードパーティのライブラリを探しているを持っていないでしょうそれ以外の場合は問題。次のコードは実行され、ローカルにPDFファイルを生成し、ときにだけでjsファイルのURLを指定したユーザーに基づいているwindow.status='ready'ページをレンダリングするために行く前に時間
func generateExec(url string, pdfFile string) error {
c := "xvfb-run wkhtmltopdf --window-status ready " + htmlFile + " " + pdfFile
cmd := exec.Command("sh", "-c", c)
if err := cmd.Run(); err != nil {
return err
}
return nil
}
私たちは、この関数を呼び出すgenerateExec("www.baidu.com","aim.pdf")ので、今、私たちは、ローカルファイル名がaim.pdfである必要があり、目標は今、フォアグラウンドプログラムに渡されたこのファイルを置くことです。golangで3行を取得するには、非常に簡単です。
c.Writer.Header().Add("Content-Disposition", fmt.Sprintf("attachment; filename=%s", fileName))
c.Writer.Header().Add("Content-Type", "application/octet-stream")
c.File(fileName)
c.File =>ファイルは、指定されたファイルを書き込み効率的な方法で体内の流れの中に。
ビューc.File注釈機能の観点から、アクセス要求がなければなりませんpost。
4前の章では、
今の私に注意を払う、あなたは、2つの事1.タイプがarraybufferするPOST2する適切な方法をVUE + axiosを使用していると仮定すると、私たちはただのような言い訳を訪問するための要求を作成する必要があります[OK]をバックグラウンドを持っていますこの機能はthis.$route.param.id 、测试报告.pdf、あなたがあなた自身を交換する必要があり、私自身の構成されています。
axios({
method: 'post',
url: process.env.API_BASE + '/version/shared-report-byte',
data: { id: this.$route.params.id },
responseType: 'arraybuffer',
timeout: 300 // request timeout
}).then(function(response) {
if (!response.data) {
return
}
let url = window.URL.createObjectURL(new Blob([response.data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '测试报告.pdf')
document.body.appendChild(link)
link.click()
}).catch(function(error) {
console.log(error)
})
最後のステップあなたがhtmlページをエクスポートしたいとされる追加windiw.status='ready'wkhtmltopdfをレンダリングする際に制御します。
このすべてを言ったか、私はスムーズに願いました。結局のところ、抜け穴の完全な強力なwkhtmltopdf。