获取远程html插入到本地的网页里面(java+react实现)

需求: 通过编辑器生成的html被上传到阿里云的服务器,但是这个html 需要嵌入到另外的一个网页里面。

环境

  • 前端: react
  • 后端: Java

Java代码

@RequestMapping(value = "/getHtml", method = RequestMethod.POST)
@UnNeedAdminId
@Unauthorize
public Object getHtml(@RequestBody Map<String, String> uri) throws Exception {
    URL url = new URL(uri.get("url"));
    URLConnection URLconnection = url.openConnection();
    HttpURLConnection httpConnection = (HttpURLConnection) URLconnection;
    int responseCode = httpConnection.getResponseCode();
    String str = "";
    if (responseCode == HttpURLConnection.HTTP_OK) {
        InputStream in = httpConnection.getInputStream();
        InputStreamReader isr = new InputStreamReader(in);
        BufferedReader bufr = new BufferedReader(isr);
        String lStr;
        while ((lStr = bufr.readLine()) != null) {
            str = str + lStr;
        }
        bufr.close();
    } else {
        str = "没有内容";
    }
    return str;
}

react 代码

export default class PHomeLog extends React.Component {
  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      siteContent: ""
    }
  }

  componentWillMount() {
    let id = this.props.id;
    let url = `http://XXXXXXX/${id}/XXX.html`;
    Fetch({
      host: "XXX",
      url: 'api/getHtml',
      body: {url},
      method: "POST",
    }).then((res)=>{
      this.setState({
        siteContent: res.data
      })
    })
  }
  createMarkup = (html) => {
    return {__html: html};
  };
    // 替换返回的html中被转义的字符
  escapeChars=(str)=> {
    str = str.replace(/&amp;/g, '&');
    str = str.replace(/&lt;/g, '<');
    str = str.replace(/&gt;/g, '>');
    str = str.replace(/&acute;/g, '\'');
    str = str.replace(/&quot;/g, '"');
    str = str.replace(/&brvbar;/g, '\\|');
    str = str.replace(/&#x27;/g, '\'');
    return str;
  }

  render() {
    let {siteContent} = this.state;
    siteContent = this.escapeChars(siteContent)
    return (
      <div>
        {
          siteContent?
            <div dangerouslySetInnerHTML={this.createMarkup(siteContent)}></div>:
            <div className="pusht">暂无日志……</div>
        }
      </div>
    );
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值