導出 PDF 圖文報表實踐

方法一： jsPDF

使用 jsPDF 時，需要注意的是其默認單位為 mm，需要在 new jsPDF() 時傳入配置

創(chuàng)新互聯(lián)建站長期為上千余家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為廬陽企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站建設，廬陽網(wǎng)站改版等技術服務。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

這個方法廢了。這個鬼東西多行文本和多個圖片，簡直要人命！

方法二： wkhtmltopdf

Vue ***

使用 Vue.js ，需要 *** 支持，否則頁面為空白

使用 Nuxt.js 作為服務端渲染框架，這里記錄一下遇到的問題和解決方案

1. 使用 Element UI，啟動就報錯 HTMLElement is not defined

Element UI 版本問題，使用最新的 2.8.x 會出現(xiàn)問題，則需要降版本并在 package.json 中配置版本策略，僅更新小版本范圍

"element-ui": "~2.4.11",

2. JS的兼容問題

在使用 wkhtmltopdf 時，提示報錯：Warning: http://localhost:3000/_nuxt/vendors.app.js:1941 SyntaxError: Parse error，估計是 ES6 的語法在wkhtmltopdf 的運行環(huán)境當中不支持，導致出現(xiàn)了這些錯誤提示。

官方Nuxt.js 2.6.X 版本其實給了 babel 的配置，默認會自動根據(jù)瀏覽器的運行環(huán)境做代碼兼容，并不需要以下的這些設置（下面只是自己的實踐過程，供參考），請直接使用第3點的解決方法。

Nuxt.js 2.6.X 文檔

通過查找資料，發(fā)現(xiàn) Nuxt.js 并沒有加入 Babel 進行 ES6 -> ES5 的轉換，下面是解決方法

1. 修改 nuxt.config.js，加入 babel-loader 相關配置

web前端開發(fā)學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰(zhàn)教程，學習工具，職業(yè)規(guī)劃）
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. 根目錄加入 .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)

根據(jù)錯誤提示，說明 babel-preset-env 還沒有安裝，命令行中執(zhí)行相應的包，安裝一下即可

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

注意，這里的 corejs 版本為 2，使用 3 會出現(xiàn)以下錯誤

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

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

`}`

`]`

`}`

 |

然后將代碼打包出來再運行即可，就不會出現(xiàn)不兼容的問題了**（注意，之前我用 yarn dev 運行，還是會出現(xiàn)第3點的錯誤，然而 generate 出來之后，就好了，估計webpack熱更新里面的代碼不兼容wkhtmltopdf的運行環(huán)境）**

yarn generate
yarn start

運行 wkhtmltopdf 命令，開啟 JavaScript 調試模式、延遲10秒保證頁面接口請求完畢渲染完成

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

最后的測試效果，圖表和其他內容都呈現(xiàn)出來了

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文標題：web前端入門到實戰(zhàn)：HTML轉PDF圖文報表實踐-創(chuàng)新互聯(lián)
新聞來源：http://m.rwnh.cn/article42/cedgec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、標簽優(yōu)化、用戶體驗、營銷型網(wǎng)站建設、Google、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)