Pergunta

Estou usando um QWebView para exibir algum conteúdo e quero usar o CSS personalizado para enfeitar a saída. Eu descobri que posso usar o QWebSettings.setUserStyleSheetUrl() Método para carregar meu próprio CSS na vista. o .css O arquivo está no mesmo diretório do meu programa principal.

self.webview = QWebView(MainWindow)
self.webview.settings().setUserStyleSheetUrl(QUrl.fromLocalFile("myCustom.css"))

No entanto, os estilos personalizados não carregam quando eu adiciono o conteúdo à página usando setHtml(). Eu testei que o CSS está se aplicando corretamente ao HTML em um navegador padrão.

Alguma ideia do que estou fazendo de errado?

Foi útil?

Solução

No QT, todos os caminhos para arquivos externos precisam ser ABSOLUTO caminhos, não relativos.

Para corrigir o problema, adiciono para fazer a seguinte alteração:

path = os.getcwd()
self.webview.settings().setUserStyleSheetUrl(QUrl.fromLocalFile(path + "/myCustom.css"))

E tudo funcionou corretamente. Espero que isso ajude alguém no futuro e a salvar algumas horas de depuração.

Outras dicas

No QT, todos os caminhos para arquivos externos precisam ser caminhos absolutos, não relativos.

Isso não é verdade. O código abaixo funciona para mim.

#include <QtCore>
#include <QtGui>
#include <QtWebKit>

int main(int argc, char ** argv)
{
    QApplication app(argc, argv);

    QMainWindow mainWindow;

    QWebView* webView = new QWebView(&mainWindow);
    webView->settings()->setUserStyleSheetUrl(QUrl::fromLocalFile("google.css"));

    QFile source("google.html");
    source.open(QIODevice::ReadOnly);
    webView->page()->mainFrame()->setHtml(QString::fromUtf8(source.readAll().constData()));

    mainWindow.setCentralWidget(webView);
    mainWindow.show();

    return app.exec();
}

O arquivo .css está no mesmo diretório do meu programa principal.

Os caminhos relativos são interpretados em relação ao diretório de trabalho atual que não precisa ser o mesmo que o diretório do executável.

Eu apenas encontrei isso, então vou postar meu trecho de teste aqui; O snippet gera seu próprio arquivo .html e .css no mesmo diretório que o script python; e o script foi chamado do mesmo diretório para teste.

Pelo menos em python/PyQt4, parece que - de fato - é caminhos absolutos que funcionam com setHtml.

O código de teste pode:

compare_qtwebkit-test.py

o setHtml o método parece mostrar texto com estilo apenas com especificação c3, Onde file:// + caminho absoluto é usado. (Editar: só queria notar que a sugestão em esta postagem, tentar Arora (uma embalagem muito simples em cima do QTWebkit); Se funcionar, é o seu código. se não for, é o site. "Foi muito útil para o comportamento de checagem dupla)

Esta é a configuração em que o script foi testado em:

$ lsb_release --description --codename 
Description:    Ubuntu 11.04
Codename:   natty

$ apt-show-versions -r python-qt4
python-qt4/natty uptodate 4.8.3-2
python-qt4-dbus/natty uptodate 4.8.3-2

$ apt-show-versions -r libqtwebkit4
libqtwebkit4/natty uptodate 2.1~really2.0.2-0ubuntu1

$ python --version
Python 2.7.1+

O script é:

qtwebkit-test.py

#!/usr/bin/env python

# portions from:
# http://pysnippet.blogspot.com/2010/01/more-fun-with-qwebkit.html

import sys
import os
from PyQt4 import QtCore
from PyQt4 import QtGui
from PyQt4 import QtWebKit

global htmltext

def GenerateFiles():
  global htmltext

  print "GenerateFiles running"

  csstext = """
  body {
    background-color: #058;
    margin: 0px;
    color: red;
  }
  """

  css_file = open("test.css", "w")
  css_file.write(csstext)
  css_file.close()


  htmltextTop = """
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  """

  htmltextBottom = """
  <title>qtwebkit-test</title>
  </head>
  <body>
  <h1>HEADING</h1>
  <p>Just to test ....</p>
  <p>.... and test some more</p>
  </body>
  </html>
  """

  cssopen = '<link rel="stylesheet" type="text/css" href="'
  cssclose = '">'

  # c1
  cssfile = "test.css"
  # c2
  #~ cssfile = os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
  # c3
  #~ cssfile = "file://" + os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
  # c4
  #~ cssfile = "qrc://" + os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
  # c5 (empty)
  #~ cssfile = ""

  cssline = cssopen + cssfile + cssclose

  #~ htmltext = htmltextTop + htmltextBottom      # without css
  htmltext = htmltextTop + cssline + htmltextBottom

  html_file = open("test.html", "w")
  html_file.write(htmltext)
  html_file.close()


def main():
  global htmltext

  GenerateFiles()
  qApp = QtGui.QApplication(sys.argv)

  webView = QtWebKit.QWebView()

  # l1
  #~ webView.load(QtCore.QUrl.fromLocalFile("test.html")) # fails

  # l2
  #~ webView.load(QtCore.QUrl.fromLocalFile("./test.html")) # fails

  # l3
  #~ webView.load(QtCore.QUrl.fromLocalFile(os.path.abspath(os.path.dirname(__file__)) + "/" + "test.html")) # this works with #c1-#c3

  # setHtml
  #print htmltext
  webView.setHtml(htmltext) # works with #c3 (rest are unstyled)

  webView.show()
  webView.resize(500, 400)
  webView.setWindowTitle(__file__)
  sys.exit(qApp.exec_())


if __name__ == "__main__":
    main()
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top