書き出しPDFのテキスト・レポート・プラクティス
方法の一つ：jsPDF
jsPDFを使用している場合、時に）デフォルトの単位は、新しいjsPDFを（設定するに渡す必要ミリメートルであることに留意すべきです
const doc = new jsPDF({
unit: 'px',
format: 'a4'
})
廃棄物のこの方法。いまいましい事の複数行のテキストとより多くの映像は、単に生活に！
方法2：wkhtmltopdf
見る***
使用Vue.js、***必要なサポート、そうでない場合は空白のページ
問題についてのレコードが発生したフレームワークをレンダリングサーバー、およびソリューションとしてNuxt.js使用
1.要素UI、エラーのHTMLElementに定義されていないを開始
要素UIのバージョン、最新の2.8.xは、問題が発生します使用は、あなたがpackage.jsonにポリシーバージョンと設定バージョンを削除する必要が、更新されたバージョンは、わずかな範囲であります
"element-ui": "~2.4.11",
2. JSの互換性の問題
wkhtmltopdfを使用する場合は、エラーを示唆している：Warning: http://localhost:3000/_nuxt/vendors.app.js:1941 SyntaxError: Parse errorES6の構文と推定さは、これらのエラーの出現につながったのオペレーティング環境wkhtmltopdfではサポートされていません。
公式Nuxt.js 2.6.Xのバージョンは、実際に、デフォルトが自動的に互換性のあるコードは、（参考のために、ちょうど彼自身の練習の下に）ブラウザの動作環境に応じて、次の設定を必要としないでしょうバベルのコンフィギュレーションを与えた、してください使用ソリューション3ポイント。
Nuxt.js 2.6.Xドキュメント
情報を探していることで、バベルはNuxt.jsがES6こと見つから参加していなかった - > ES5の変換は、ここでのソリューションです
- 変更nuxt.config.js、追加バベル・ローダー設定
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push(
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
},
// 添加下方内容
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/
}
)
}
}
- ルート参加
.babelrcファイルを
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "2",
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}
上記の設定後、次のエラーに似て求められることがあります
ERROR in ./.nuxt/client.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-env' from '/Users/wyj/Workspace/nuxt-example'
- Did you mean "@babel/env"?
at Function.module.exports [as sync] (/Users/wyj/Workspace/nuxt-example/node_modules/resolve/lib/sync.js:58:15)
at resolveStandardizedName (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at /Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/config-chain.js:120:22)
at loadPrivatePartialConfig (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/partial.js:85:55)
at Object.loadPartialConfig (/Users/wyj/Workspace/nuxt-example/node_modules/@babel/core/lib/config/partial.js:110:18)
at Object.<anonymous> (/Users/wyj/Workspace/nuxt-example/node_modules/babel-loader/lib/index.js:144:26)
命令はエラーによると、babel-preset-envコマンドライン上の対応するパッケージの実行をインストールしていない、あなたはそれをインストールすることができます
yarn add @babel/preset-env core-js@2 -D
注、ここcorejsバージョンは2、3次のエラーです
friendly-errors 01:38:28 ERROR Failed to compile with 35 errors
friendly-errors 01:38:28 These dependencies were not found:
friendly-errors 01:38:28
friendly-errors 01:38:28 * core-js/modules/es6.array.find in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.array.iterator in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.date.to-string in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.function.name in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.assign in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.keys in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.to-string in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.promise in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js
3.警告：未定義：0例外TypeError：「未定義の」の関数ではありません
互換性のnuxt.config.jsにJSファイルを追加します
|
`head``: {`
`//` `...`
`script: [`
`{`
`src:`
`'[https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.10/es5-shim.min.js](https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.10/es5-shim.min.js)'`
`},`
`{`
`src:` `'[https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js](https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js)'`
`},`
`{`
`src:`
`'[https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-sham.min.js](https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-sham.min.js)'`
`},`
`{`
`src:`
`'[https://cdnjs.cloudflare.com/ajax/libs/es7-shim/6.0.0/es7-shim.min.js](https://cdnjs.cloudflare.com/ajax/libs/es7-shim/6.0.0/es7-shim.min.js)'`
`},`
`{`
`src:`
`'[https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js](https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js)'`
`}`
`]`
`}`
|
コード、それをパッケージ化し、それを実行している、それは互換性のない問題は表示されません**（ノート、私は糸DEVで実行、または3ポイントのエラーが発生する前に、しかし、後にちゃんと出て生成し、推定コード更新の内側のWebPACKの熱は、互換性のwkhtmltopdfランタイム環境ではありません）**
yarn generate
yarn start
実行wkhtmltopdfコマンド、ページのレンダリングは、完全なインタフェース要求が完了していることを確実にするためにはJavaScriptのデバッグモードで、10秒の遅延を開きます
wkhtmltopdf --enable-javascript --debug-javascript --javascript-delay 10000 http://localhost:3000/echarts 1.pdf
最終テストの結果、チャートやその他のコンテンツが出て提示しました