Getting to combat web front end: HTML to PDF text report Practices

Export PDF text report Practices

Method One: jsPDF

When using jsPDF, it should be noted that default unit is mm, need to pass to configure the new jsPDF () when

const doc = new jsPDF({
    unit: 'px',
    format: 'a4'
})

This method of waste. The damn thing multiline text and more pictures, simply to life!

Method Two: wkhtmltopdf

View ***

Use Vue.js, *** required support, otherwise blank page

Use Nuxt.js as a server rendering framework, where the record about the problems encountered and solutions

1. Use Element UI, start on the error HTMLElement is not defined

Element UI version, use the latest 2.8.x will have problems, you need to drop the policy version and configuration version in package.json, the updated version is only a small range

"element-ui": "~2.4.11",

2. JS compatibility issues

When using wkhtmltopdf, suggesting an error: Warning: http://localhost:3000/_nuxt/vendors.app.js:1941 SyntaxError: Parse errorestimated to be ES6 syntax is not supported in the operating environment wkhtmltopdf of which led to the emergence of these errors.

Official Nuxt.js 2.6.X versions actually gave babel configuration, the default will automatically make the code compatible depending on the operating environment of the browser and does not require the following settings (just below his own practice, for reference), please use solution 3 points.

Nuxt.js 2.6.X document

By looking for information, did not join the Babel found Nuxt.js be ES6 -> conversion of ES5, here is the solution

1. Modify nuxt.config.js, added babel-loader configuration

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)/
      }
    )
  }
}

1. Join the root .babelrcfile

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "2",
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

After the above settings, you may be prompted similar to the following error

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)

According to error, instructions babel-preset-envhave not installed, the corresponding package execution on the command line, you can install it

yarn add @babel/preset-env core-js@2 -D

Note, corejs version here is 2, 3 the following error

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. Warning: undefined:0 TypeError: ‘undefined’ is not a function

Adding a compatible nuxt.config.js the js file

| 

`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)'`

`}`

`]`

`}`

 |

The code is then packaged it and then run it, it will not appear incompatible problem ** (note, before I run with yarn dev, or 3 point error occurs, however, after generate out just fine, estimate webpack heat inside the code update is not compatible wkhtmltopdf runtime environment) **

yarn generate
yarn start

Run wkhtmltopdf command, open the JavaScript debugging mode, 10-second delay to ensure that the page rendering is complete interface request is completed

wkhtmltopdf --enable-javascript --debug-javascript --javascript-delay 10000 http://localhost:3000/echarts 1.pdf

The final test results, charts and other content presented out