Pregunta

Estoy utilizando un QWebView para mostrar algunos contenidos y quiero usar CSS personalizado para arreglar la salida. He descubierto que puedo utilizar el método QWebSettings.setUserStyleSheetUrl() cargar mi propio CSS en la vista. El archivo .css está en el mismo directorio que mi programa principal.

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

Sin embargo, los estilos personalizados no se cargan cuando agrego el contenido de la página utilizando setHtml(). He probado que el CSS está aplicando correctamente al HTML en un navegador estándar.

Cualquier idea de lo que estoy haciendo mal?

¿Fue útil?

Solución

En Qt, todas las rutas de acceso a archivos externos debe ser ABSOLUTOS caminos, no los relativos.

Para solucionar el problema, añadir a realizar el cambio siguiente:

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

y todo funcionaba correctamente. Esperamos que esto ayudará a alguien en el futuro y guardarlos en un par de horas de depuración.

Otros consejos

  

En Qt, todas las rutas de acceso a archivos externos   deben ser rutas absolutas, no   los relativos.

Eso no es cierto. El siguiente código funciona para mí.

#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();
}
  

El archivo .css se encuentra en el mismo directorio   como mi programa principal.

Las rutas relativas se interpretan en relación con el directorio de trabajo actual, que no tiene por qué ser el mismo que el directorio del ejecutable.

Me acabo de encontrar con esto, así que voy a publicar mi prueba aquí fragmento de código; el fragmento genera su propio html y css archivo en el mismo directorio que el script en Python; y la secuencia de comandos se llama desde el mismo directorio para la prueba.

Por lo menos en python / PyQt4, parece que - de hecho - es sólo rutas absolutas que el trabajo con setHtml.

El código de prueba puede:

compare_qtwebkit-test.py

El método setHtml parece mostrar texto con estilo solamente con c3 memoria descriptiva, cuando se utiliza file:// + ruta absoluta. ( EDIT: sólo quería señalar que la sugerencia en este post , "probar Arora (un envoltorio muy simple en la parte superior de QtWebKit); si funciona, es su código si no lo hace. , su sitio web." fue muy útil para el comportamiento de doble control )

Esta es la configuración de la secuencia de comandos se puso a prueba en:

$ 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+

El guión es:

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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top