当前位置: 首页 > 工具软件 > Html2Article > 使用案例 >

vue中渲染html网页

皮骏
2023-12-01

有的时候我们想在vue中直接显示一个html的网页,如果用富文本方式,那么内容就会太多,
我们希望只需填入url链接
那么怎么处理呢?
直接上代码

步骤一:
新建一个vue文件,命名为"HtmlPanel.vue",内容如下,直接ctrl+cv即可!
(为简洁,代码经过缩进,在使用时格式化以下即可,不影响使用)

<template>
  <div> <p v-html="html"></p></div>
</template>
<script>
export default {
props: {url: {required: true }},
  data() {return {html: ""};},
  watch: {url(value) {this.load(value);}},
  mounted() {this.load(this.url);},
  methods: {
    load(url) {
      if (url && url.length > 0) {
        let param = {accept: "text/html, text/plain"};
        this.$http.get(url, param).then(response => { this.html = response.data;}).catch(() => {this.html = "加载失败";});
      }
    }
  }
};
</script>

步骤二
使用上述的vue组件
在你的vue页面中添加如下代码

<template>
    <div>
      <HtmlPanel :url.sync="url1"/>
    </div>
</template>
<script>
import HtmlPanel from "../HtmlPanel.vue"; //根据实际路径导入
export default {
  components:{HtmlPanel},
  data() {
    return {
      url1:"http://www.baidu.com",// 这里填写你需要渲染的url网页
    }
  },
}
</script>

OK!就2个步骤,有帮助的话,麻烦点个赞。

此外
如果遇到跨域,那么请到以下这篇文章

https://blog.csdn.net/u010775335/article/details/110857411

HtmlPanel.vue中使用到的this.$http是什么?怎么引入?
只需安装axios

npm install axios -g

并在main.js中添加如下代码即可

import axios from "axios"
Vue.prototype.$http = axios;
 类似资料: