java请求vue写的界面并转成pdf vue如何转换成html页面

转载

mob64ca1416b5a8 2024-06-29 06:05:12

文章标签 java请求vue写的界面并转成pdf vue js nodejs html 文章分类 Java 后端开发

示例1：基于node的程序

第一步：在命令行中输入如下，生成package.json文件

npm init -y

第二步：新建app1.js文件，运行在node环境中

渲染一个-vue-实例

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')  //导入vue
    //创建vue实例
const app = new Vue({
  template: `<div>姓名：{{ name }}, 年龄：{{ age }}</div>`,
  data: {
    name: '张三',
    age: 18
  }
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
// renderer.renderToString(app).then(html => {
//   console.log(html)
// }).catch(err => {
//   console.error(err)
// })

第三步：在命令行中输入clear，可清除；运行上述代码，输入如下，并回车

node app1.js

可在命令行中查看渲染出来的结果

//插值表达式解析成具体的数据
<div data-server-rendered="true">Hello World 张三 --18</div>

示例2：服务端渲染-基于vue渲染，用vue拼接html代码，把vue模板转换成html字符串，输出给浏览器

这种方式，有利于seo，但既有客户端代码，又有服务端代码，比较麻烦

第一步：开启服务器的最快方式express，命令行中下载服务器

npm i express

第二步：新建app2.js文件，首先导入express模块

与服务器集成

1.0版本

//导入express模块
const express = require('express')
const Vue = require('vue')
//创建renderer对象
const renderer = require('vue-server-renderer').createRenderer()

//创建app对象，可以注册路由、监听端口
const app =express()
//设置路由  '*'代表所有路由
app.get('/', (req, res) => {
  const vue = new Vue({
    template: '<div>{{ foo }}</div>',
    data: {
      foo: 'Hello world'
    }
  })

  // 第 3 步：通过renderToString()方法 将 Vue 实例渲染为 HTML返回给浏览器
  renderer.renderToString(vue, (err, html) => {
    if (err) {
      console.log(err)
      return
    }
    res.end(html)
    // => <div data-server-rendered="true">Hello World</div>
  })
})

//监听端口  3000或8080
app.listen(8080, () => {
  console.log('监听8080')
})

2.0版本

//导入express模块
const express = require('express')
const Vue = require('vue')
    //创建renderer对象
const renderer = require('vue-server-renderer').createRenderer()

//创建app对象，可以注册路由、监听端口
const app = express()

//设置路由  '*'代表所有路由
app.get('*', (req, res) => {
    // 创建一个vue的实例
    const vue = new Vue({
        data: {
            url: req.url,
            msg: '这是服务端渲染的数据'
        },
        template: `<div>访问的 URL 是： {{ url }} --- {{ msg }}</div>`
    })

    // 第 3 步：通过renderToString()方法 将 Vue 实例渲染为 HTML返回给浏览器
    renderer.renderToString(vue, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        //<meta charset="utf-8">  告诉浏览器代码是utf-8格式，可渲染中文
        res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title><meta charset="utf-8"></head>
        <body>${html}</body>
      </html>
    `)
    })
})

//监听端口  3000或8080
app.listen(3000, () => {
    console.log('监听3000')
})

第三步：在命令行中输入clear，可清除；运行上述代码，输入如下，并回车